回答編集履歴
1
追記しました
answer
CHANGED
|
@@ -30,4 +30,21 @@
|
|
|
30
30
|
```
|
|
31
31
|
の2パターンあります。
|
|
32
32
|
なので「表示された<li>」をCSSでは「styleにnoneが無いもの」としてます。
|
|
33
|
-
表示された<li>の次の表示された<li>にスタイルを適用する事で先頭は対象外になります。
|
|
33
|
+
表示された<li>の次の表示された<li>にスタイルを適用する事で先頭は対象外になります。
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
追記
|
|
38
|
+
|
|
39
|
+
:nth-last-childにこんな使い方があるのを知りませんでした。
|
|
40
|
+
これを使えば「表示された<li>の最後」をCSSで表現できますね。
|
|
41
|
+
```CSS
|
|
42
|
+
.list-item{
|
|
43
|
+
border-bottom: 1px solid;
|
|
44
|
+
padding: .5em;
|
|
45
|
+
}
|
|
46
|
+
.list-item:nth-last-child(1 of :not([style*="none"])){
|
|
47
|
+
border-bottom: none;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
こちらの方が理解しやすいかな。
|