Web制作
CSSセレクタ「フクロウセレクタ」について

CSSセレクタ「フクロウセレクタ」について

2022.08.03

CSSを設定するときに、いろいろなセレクタを使いますが、その中に「フクロウセレクタ」と呼ばれるものがあります。ただ、使い道があるかというと、正直、そういった機会は少ないと思いますが、セレクタがどうやって適用されるのかについて学習するいい教材だと思うので、しっかり学んでみましょう！

「 * + * 」=フクロウセレクタ

まず、フクロウセレクタとは、このようなセレクタで、見た目がフクロウに似ているので、そう呼ばれているそうです。

で、これを実際に使ってみると、このような感じになります。

<style>
    .wrap > * + *{
        color: red;
    } 
</style>
<div class="wrap">
    <h1>最初の見出し</h1>
    <p>最初の段落の文章</p>
    <h2>二番目の見出し</h2>
    <p>二番目の段落の文章</p>
    <h3>三番目の見出し</h2>
    <p>三番目の段落の文章</p>
</div>

このスクショを見ると分かるのですが、二番目以降の色が変わっています。つまり、フクロウセレクタは、二番目以降の要素にCSSを適用させる効果があります。

使われているセレクタを、細かくチェック

今回のサンプルでは、フクロウセレクタ以外にも「>」を使っているのですが、それを含めてセレクタの機能を再確認していきます。

セレクタ「>」

これは、「直下の子要素」を指定するセレクタです。実は、このセレクタは、フクロウセレクタには必須ではないのですが、わかりやすいサンプルにするため使用しています。

セレクタ「*」

これはすべての要素を設定するセレクタです。プログラムでは、よくワイルドカードと呼ぶことがありますが、同じと考えていいと思います。

セレクタ「+」

これは隣接する要素を選択するセレクタです。

これらをまとめると、各セレクタは、このように動作することで、2番目以降の要素にCSSを適用させているんだと考えています。

「:not()」と「:first-child」でも、できるのでは？

ところが、CSSの使い方に慣れている人だったら、「二番目以降だったら、『:not()』と『:first-child』でもできるのでは」というのが浮かぶと思います。
そこで、実際にこちらのサンプルを試したのですが、結果としては、フクロウセレクタでなくても、2番目以降の要素に、CSSを適用させることができました。

<style>
    .wrap > :not(:first-child){
        color: red;
    } 
</style>
<div class="wrap">
    <h1>最初の見出し</h1>
    <p>最初の段落の文章</p>
    <h2>二番目の見出し</h2>
    <p>二番目の段落の文章</p>
    <h3>三番目の見出し</h2>
    <p>三番目の段落の文章</p>
</div>

フクロウセレクタを使って、3番目以降の色を変える

フクロウセレクタと:notを使ったパターンと比べると、個人的には:notの方が視覚的にわかりやすいんじゃないかなと思います。そう考えると、フクロウセレクタが優先的に使われる状況を想像できなかったのですが、フクロウセレクタを少し改造して、「 * + * + *」とすると、3番目以降の要素の色を変えることができました。

<style>
    .wrap > * + * + *{
        color: red;
    } 
</style>
<div class="wrap">
    <h1>最初の見出し</h1>
    <p>最初の段落の文章</p>
    <h2>二番目の見出し</h2>
    <p>二番目の段落の文章</p>
    <h3>三番目の見出し</h2>
    <p>三番目の段落の文章</p>
</div>