cssの「フクロウセレクタ」についてご紹介します。

フクロウセレクタとは？

連続する要素の、最初の要素以外（2番目以降）の要素全てに対してスタイルを適用する指定方法です。

全称セレクタ（*）と隣接セレクタ（+）を使用して、* + *　と表記します。
この見た目がふくろうに似ている、ということでフクロウセレクタというようです。

フクロウセレクタの使い方

最初のリストのみborderをつけたくない時に

・html

 

・疑似クラスを使用したcss記述

最初の要素のborderを打ち消す記述が必要でした。

 

・フクロウセレクタを使用したcss記述

1行で記述することができます。

 

否定疑似クラス「:not」でも同じようなことができる

以前の記事で紹介した、否定疑似クラス「:not」でもフクロウセレクタと同じことができます。