【HTML/CSS】セレクタの種類

セレクタの種類をまとめてみました。以下のコードを例に整理していきます。

index.html

<div class="parent">
    <p class="child">子(親要素直下のp)</p> <!-- ・・・① -->
    <div class="child"> <!-- ・・・② -->
        <p class="descendant">子孫(親要素直下のdiv内のp)</p> <!-- ・・・③ -->
        <div class="descendant"> <!-- ・・・④ -->
            <p class="descendant">子孫(親要素直下のdiv内div内のp)</p> <!-- ・・・⑤ -->
        </div>
    </div>
</div>

↓ブラウザ上での表示

##子セレクタ
親要素の直下にある要素。今回は①②が該当する。
ｃｓｓファイルでは、親と子は>で表す。

main.css

.parent > p{
    color:red;
}

このように記述すると、親要素直下のp要素（①）のみにスタイルが適応され、以下のような表示になる。他にもp要素（③と⑤）はあるが、子要素ではないため適応されない。

##子孫セレクタ
親要素内の全ての要素。今回は①②③④⑤が該当する。
ｃｓｓファイルでは、親と子は半角スペースで表す。

main.css

.parent p{
    color:red;
}

このように記述すると、親要素内全てのp要素（①と③と⑤）にスタイルが適応され、以下のような表示になる。

##全称セレクタ（ユニバーサルセレクタ）
*（アスタリスク）をセレクタにすると、全ての要素が対象になる。初期設定をリセットしたい際に用いると便利である。