シェアする

【CSS】フクロウセレクタ便利じゃん

シェアする

お恥ずかしながらフクロウセレクタ(owl selector)というのを最近知りました。

フクロウセレクタとは全称セレクタ * を連ねて、連続する要素の場合にスタイルが当たるようにするものです

* + * このように見た目がフクロウの顔に見えるからフクロウセレクタというみたいですね。

実際に使ってみると、疑似クラス(nth-childとか)を使うよりもシンプルに書けるのでいいですね。

実際にフクロウセレクタを使って横並びメニューを実装してみる

横並びリストがわかりやすいので実際に使ってみます。

最低限の実装、擬似クラスでの実装、フクロウセレクタでの実装を掲載しますので見比べてみてください。

わかりやすいようにリスト全体にボーダーをつけてあります。

なにも考えずに最低限の実装

See the Pen PowgBMM by yinouet (@yinouet) on CodePen.

リスト全体の幅を考えなければ、正直コレでも良いと思うんですけどね。

ただこれで問題になるのは、親要素やページ幅、コンテンツ幅いっぱいにリストを広げたい場合ですね。(その場合素直にflex-box使ったほうがいいですが)

見ての通り、左端に余分な余白が付いてしまいます。

疑似クラスを使った実装

See the Pen RwNOMJq by yinouet (@yinouet) on CodePen.

今までこれやってました。

全部の要素に共通で指定したスタイルを、擬似クラスを使って特定の要素だけ打ち消すというやり方ですね。

問題という程ではないのですが、一度指定したスタイルを後から打ち消すことになるので効率が悪いというか。

margin-leftって2回も書いてるの無駄じゃないですか。

フクロウセレクタを使った実装

See the Pen jOERvNr by yinouet (@yinouet) on CodePen.

このようにフクロウセレクタを使うことで、無駄にスタイルを打ち消すことなく(同じプロパティを何度も書くことなく)、最初の要素だけ除外してスタイルを当てることができます。

注意するべきなのは、子要素として指定するので余白を設定したい要素の親要素が必要になることですね。

HTMLの構造次第では、ラッパーを用意する必要が出てくるかもしれません。

使いどころは積み重ねる要素

この記事では横並びリストを実装してみましたが、積み重ねる要素の余白指定に使えます。

ブログでは記事リストとか、フォーム、セクションの積み重ねで一番上だけ余白を付けたくないなどですね。

ちなみに上の例では .class > * + * として直接の子要素を指定しているのですが、これを .class * + * のように子孫要素に指定することで、入れ子になっているリストなど階層構造になっていても適用することができます。