回答編集履歴

5

コード内のコメントを修正

2017/01/27 08:41

投稿

flat
flat

スコア617

test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  function visible_last_child() {
66
66
 
67
- // .select-last-item を与えられた要素(ul)を取得
67
+ // .visible-last を与えられた要素(ul)を取得
68
68
 
69
69
  var elements = document.getElementsByClassName('visible-last');
70
70
 
@@ -78,7 +78,7 @@
78
78
 
79
79
 
80
80
 
81
- // .select-last-item を与えられた要素(今回はul要素に指定)を個別に取得するためのループ
81
+ // .visible-last を与えられた要素(今回はul要素に指定)を個別に取得するためのループ
82
82
 
83
83
  for (var i = 0; i < l; ++i) {
84
84
 

4

コード修正

2017/01/27 08:41

投稿

flat
flat

スコア617

test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  <style type="text/css">
50
50
 
51
- .last-item {
51
+ .last-child {
52
52
 
53
53
  background-color: red;
54
54
 

3

追記とコードの微修正

2016/04/20 03:57

投稿

flat
flat

スコア617

test CHANGED
@@ -122,19 +122,19 @@
122
122
 
123
123
  // 変数targetに最後に代入された要素にクラスを追加
124
124
 
125
- // 他のクラスがあるときはスペースを空けて.last-itemを追加
125
+ // 他のクラスがあるときはスペースを空けて.last-childを追加
126
126
 
127
127
  if (target.className) {
128
128
 
129
- target.className = target.className + ' last-item';
129
+ target.className = target.className + ' last-child';
130
130
 
131
131
 
132
132
 
133
- // 他にクラスがないときはそのまま.last-itemを追加
133
+ // 他にクラスがないときはそのまま.last-childを追加
134
134
 
135
135
  } else {
136
136
 
137
- target.className = 'last-item';
137
+ target.className = 'last-child';
138
138
 
139
139
  }
140
140
 
@@ -164,7 +164,7 @@
164
164
 
165
165
  <li>リスト2</li>
166
166
 
167
- <li>リスト3</li><!-- displayプロパティの値がnoneである要素を除いた最後の要素に.last-itemが追加される -->
167
+ <li>リスト3</li><!-- displayプロパティの値がnoneである要素を除いた最後の要素に.last-childが追加される -->
168
168
 
169
169
  <li style="display:none;">リスト4</li>
170
170
 
@@ -177,3 +177,5 @@
177
177
  </html>
178
178
 
179
179
  ```
180
+
181
+ ちなみに、このコードは動的な変化(`display: none;`を動的に付け外しするなど)には対応していないので、そのような動的な処理がある場合にはそちらにも同様の処理を追加する必要があることに注意してください。

2

JavaScriptによる対応コードを追記

2016/04/19 16:59

投稿

flat
flat

スコア617

test CHANGED
@@ -19,3 +19,161 @@
19
19
  すみません、質問を勘違いしていました。
20
20
 
21
21
  `<li>リスト3</li>`にスタイルを当てたいと書いてありますね…。
22
+
23
+
24
+
25
+ **追記**
26
+
27
+ kei344さんが仰っているように、現状のCSSセレクタでは対応できません。
28
+
29
+ これに対応可能なJavaScriptを用意したので、よろしければ試してみてください。
30
+
31
+ 確認しやすいようにHTMLごとコードを記載しておきます。
32
+
33
+ ```HTML
34
+
35
+ <!DOCTYPE html>
36
+
37
+ <html lang="ja">
38
+
39
+ <head>
40
+
41
+ <meta charset="utf-8">
42
+
43
+ <title>example</title>
44
+
45
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
46
+
47
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
48
+
49
+ <style type="text/css">
50
+
51
+ .last-item {
52
+
53
+ background-color: red;
54
+
55
+ }
56
+
57
+ </style>
58
+
59
+ <script type="text/javascript">
60
+
61
+ ;( function() {
62
+
63
+ // displayプロパティの値がnoneではない最後の子要素にクラスを追加する関数
64
+
65
+ function visible_last_child() {
66
+
67
+ // .select-last-item を与えられた要素(ul)を取得
68
+
69
+ var elements = document.getElementsByClassName('visible-last');
70
+
71
+ // 要素(ul)の数を取得
72
+
73
+ var l = elements.length;
74
+
75
+ // for ループ処理用の変数を宣言
76
+
77
+ var element, children, c, child, target;
78
+
79
+
80
+
81
+ // .select-last-item を与えられた要素(今回はul要素に指定)を個別に取得するためのループ
82
+
83
+ for (var i = 0; i < l; ++i) {
84
+
85
+ // 個別の要素(ul)を取得
86
+
87
+ element = elements[i];
88
+
89
+ // 子要素(li)を取得
90
+
91
+ children = element.children;
92
+
93
+ // 子要素(li)の数を取得
94
+
95
+ c = children.length;
96
+
97
+
98
+
99
+ // 子要素(li)を個別に取得するためのループ
100
+
101
+ for (var j = 0; j < c; ++j) {
102
+
103
+ // 子要素(li)を個別に取得
104
+
105
+ child = children[j];
106
+
107
+
108
+
109
+ // displayプロパティの値がnone以外の子要素を取得
110
+
111
+ if (child.style.display !== 'none') {
112
+
113
+ // 変数targetに子要素を代入
114
+
115
+ target = child;
116
+
117
+ }
118
+
119
+ }
120
+
121
+
122
+
123
+ // 変数targetに最後に代入された要素にクラスを追加
124
+
125
+ // 他のクラスがあるときはスペースを空けて.last-itemを追加
126
+
127
+ if (target.className) {
128
+
129
+ target.className = target.className + ' last-item';
130
+
131
+
132
+
133
+ // 他にクラスがないときはそのまま.last-itemを追加
134
+
135
+ } else {
136
+
137
+ target.className = 'last-item';
138
+
139
+ }
140
+
141
+ }
142
+
143
+ }
144
+
145
+
146
+
147
+ // DOMを読み込み終えたときにvisible_last_child()を実行
148
+
149
+ document.addEventListener('DOMContentLoaded', visible_last_child, false);
150
+
151
+ }());
152
+
153
+ </script>
154
+
155
+ </head>
156
+
157
+ <body>
158
+
159
+ <!-- .visible-lastを追加した要素が対象になる -->
160
+
161
+ <ul class="visible-last">
162
+
163
+ <li style="display:none;">リスト1</li>
164
+
165
+ <li>リスト2</li>
166
+
167
+ <li>リスト3</li><!-- displayプロパティの値がnoneである要素を除いた最後の要素に.last-itemが追加される -->
168
+
169
+ <li style="display:none;">リスト4</li>
170
+
171
+ <li style="display:none;">リスト5</li>
172
+
173
+ </ul>
174
+
175
+ </body>
176
+
177
+ </html>
178
+
179
+ ```

1

追記

2016/04/19 16:49

投稿

flat
flat

スコア617

test CHANGED
@@ -13,3 +13,9 @@
13
13
  }
14
14
 
15
15
  ```
16
+
17
+ **追記**
18
+
19
+ すみません、質問を勘違いしていました。
20
+
21
+ `<li>リスト3</li>`にスタイルを当てたいと書いてありますね…。