最初の要素以外を指定するセレクタ 「フクロウセレクタ」
カテゴリ : CSS
フクロウセレクタとは、最初の要素以外を指定するセレクタです。
ユニバーサルセレクタ（ * )と隣接セレクタ( + )を合わせた(*+*)です。
このセレクタで最初の要素以外（2番目以降の要素）を指定することができます。
よく使用されているのは「:not(:first-child)」ですが、
フクロウセレクタの方が、記述が簡単で覚えやすいですね！
＜使用例＞
|
1 2 3 4 5 6 7 8 9 |
<ul class="box"> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> <li>ボックス</li> <ul> |
|
1 2 3 4 5 6 7 8 9 |
.box { padding: 20px; border: solid 1px #ccc; } .box li { margin-top: 10px; } |
- ボックス
- ボックス
- ボックス
- ボックス
「li」に「margin-top:10px」を指定しているので、最初のボックスの上の余白が広くなっています。
そこで
cssに
|
1 2 3 4 5 |
.box > *+* { margin-top: 10px; } |
- ボックス
- ボックス
- ボックス
- ボックス
としてあげることで、２番目以降の「li」に「margin-top:10px」が適用されるので、
ulの上の余白なくなりました。