最近知った便利なCSSセレクタをご紹介します。
その名は「フクロウセレクタ」です。
フクロウセレクタとは?
連続する2番目以降の要素全てにCSSを効かせるテクニックです。
ユニバーサルセレクタ( * )と、隣接セレクタ( + )を使用して、
* + *
で表記し、これがフクロウの顔に似ていることから「フクロウセレクタ」と名付けれられました。
Axiomatic CSS and Lobotomized Owls
Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t a...
alistapart.com
使用例
article> * + * {
margin-top: 1em;
}WordPress でもよく使われる、article のループで使用すると便利です。
最初の article 以外に margin-top: 1em;を設定できます。
まとめ
リセットCSS に入れても良いくらい、便利なセレクタなので覚えておきましょう！