More than 1 year has passed since last update.

そこフクロウで書いたらシンプルに書けるで！フクロウ？

Posted at 2023-03-16

CSSにはフクロウセレクタと呼ばれるものがあります！

なんやそれ？
って感じですが実際の記述が下記になります!

* + * {
 margin-top: 8px;
}

セレクタがフクロウの顔のように見えることからフクロウセレクタと呼ばれているそうです！

フクロウセレクタってなんやねん…* + *

フクロウセレクタは最初の要素以外の兄弟要素に対してスタイルを当ててくれます。
リストスタイルなどで1つ目と最後にはmarginをつけたくない。
というシーンがあると思います。

See the Pen Untitled by tanimotohikari (@tanimotohikari) on CodePen.

わかりやすいようにグレーの背景色をつけてみました。
最初の要素にはpaddingで指定した8pxしか当たっていないのでリストアイテムが均等な間隔で並ぶのを再現できます！

フクロウセレクタを使わなくても別の書き方でも実現できます！

全てのリストアイテムにmarginをつけて最初の要素だけmarginを打ち消す方法です。

.list > li {
  padding: 8px;
  background-color: #333;
  margin-top: 8px;
  color: #fff;
}

.list > li:first-child {
  margin-top: 0px;
}

ただ、一度つけたプロパティを打ち消すので書き方としては冗長的な気がする…。

:not()を利用することでも同じ見た目を再現できます！

.list > li {
  padding: 8px;
  background-color: #333;
  color: #fff;
}

.list > li:not(:first-child) {
  margin-top: 8px;
}

打ち消しパターンよりはシンプルに記述できます！
それでも「ではない」という例外処理になるので若干の読みづらさは否めない気はする…。

#【まとめ】フクロウセレクタでシンプルに書く
フクロウセレクタは読みやすいコードかと言われると正直微妙だとは思います…。

フクロウセレクタを知らないと「これなに？」となります…

サイトの状況で冗長的に書かざるおえない場合もあると思うのでどれを使うかはケースバイケースだと思います。
ただ、打ち消しや:not()を使うよりはシンプルに書けるのは間違いないので利用していくのが良いと考えています！