CSSの:not()や:nth-child()の擬似クラス【現役SEが解説】

PROGRAM

今回は、CSSの:not()や:nth-child()の擬似クラスについて、それぞれに分け、簡単に解説していきます。

:not()

:not()は()内のセレクタに一致しない要素を表します。

要素:not(セレクタA)の場合、セレクタAに一致しない要素です。

span:not(.hoge){
    color:red;
}

上記のコードでは、hogeというクラスを持たないspan要素の文字色を赤色にしています。

:nth-child()

:nth-child()は()内に指定された順番の要素を表します。

要素:nth-child(n)では、n番目の要素のみにスタイルが適用されます。

div span:nth-child(2){
    color:green;
}

上記のコードでは、全てのdiv要素の中の2番目のspan要素のみ、文字色を緑色にしています。

:first-child(1番目の場合のみ)

:first-childは最初の順番の要素のみ(:nth-child(1))を表します。

要素:first-childでは、最初の順番の要素のみにスタイルが適用されます。

div span:first-child{
    color:blue;
}

上記のコードでは、全てのdiv要素の中の最初のspan要素に対してのみ、文字色を青色にしています。