eclairのブログ 
今回は、ワンランク上のCSSのテクニックを身につけるために、フクロウセレクタをご紹介します。フクロウセレクタ(owl selector)は要素の間隔を設定する際に重宝するセレクタです。繰り返し要素が並ぶようなデザインの時に活用するとCSSの記述量が減ります。また、シンプルな実装方法なのでメンテナンス性も上がります。頻出度合いが高めなので覚えておいて損はないでしょう。
コーディングのスピードアップをしたい人やCSSが複雑になっている人にもおすすめです。
フクロウセレクタとは？
フクロウセレクタはユニバーサルセレクタ（＊）と次の兄弟要素を指定する隣接セレクタ（＋）の組み合わせでつくられた「＊＋＊」というセレクタのことです。CSSのセレクタとしてこの指定方法をを使うことで二番目以降の要素を指定することができます。最初以外の要素と言い換えることもできます。
* + *{
/* ここにスタイルを記述します */
}
フクロウセレクタは、リストが縦に何個も並んでいる場合に余白を要素と要素の間に余白を持たせたい場面で使うことができます。
* + *{
margin-top: 30px;
}そのほかにもいろいろなケースで活用することができます。例えば、以下のようなケースです。
- ブログ記事で段落と段落の間に余白を持たせたい
- ヘッダーでアイコンが横一列に並んでいて余白を持たせたい
- メニューの項目と項目の間にボーダー(境界線)をつけたい
他の代替案よりも優れているフクロウセレクタ
フクロウセレクタはシンプルな実装方法で問題への解決策を提供します。他の代替案よりも最小限の記述量で要素を指定できますし、複数のセレクタにスタイルが分散することも防げます。以下の方法が代替案の例になりますが、ほとんどのケースはフクロウセレクタによって書き換えることができます。
*{
border-bottom: solid 1px #000;
}
*:last-child{
border-bottom: none;
}境界線をこのようなやり方で指定する方法もありますが、記述量が多いこととスタイルが２箇所に分散して記述されてしまっていることでメンテナンス性を犠牲にしています。
* + *{
border-top: solid 1px #000;
}
:not(:first-child)という否定擬似クラスnotと最初の子要素を指定するfirst-child擬似グラスとの組み合わせによっても最初の要素以外に同じスタイルをあてられます。ほとんど変わりはありませんが、こちらも記述量が若干増えるという点でフクロウセレクタの方が優れているといえます。
:not(:first-child){
border-top: solid 1px #000;
}* + *{
border-top: solid 1px #000;
}
僕は、コーディングの効率を徹底的にあげるためにこのようなシチュエーションは全てフクロウセレクタを使うようにしています。
フクロウセレクタ唯一の欠点
わかりにくいです。
初めて見た人からすると直感的に振る舞いが予想できないのが欠点です。セレクタ一つ一つの意味を分解すれば予想することもできるのですが、大人数で開発するときには事前にフクロウセレクタの知識を共有しておかないと他の人は混乱するかもしれません。
簡単なデモによるいくつかの実装例
実際によくあるシチュエーションを簡単なデモで再現しました。自分で実装する際の参考にしてください。
まとめ
フクロウセレクタを使う事で今まで行なっていた複雑な実装をシンプルにスッキリと記述することができるようになりました。知らなかった方はこれを機にどんどん活用してみてください。
この記事をかいてみての感想
HTMLやCSSに関する質問やブログ記事として書いて欲しいテーマなどあれば、ぜひコメントまってます！
▼感想
今回の記事はよりターゲットが明確でメッセージもシンプルだったということもあってかなりわかりやすい記事がかけたような気がしています。どうでしょう？
フクロウセレクタって名前がかわいい。
フクロウセレクタを知っている人ってどれくらいの割合なんだろうか。
▼書き足したい内容メモ
・擬似クラス:not(:nth-child)を使った余白の実装例
