CSSの最初の要素や最後の要素の指定方法【現役エンジニアが解説】

PROGRAM

今回は、CSSの最初の要素や最後の要素の指定方法について、それぞれに分け、簡単に解説していきます。

最初の要素

最初の要素にスタイルを適用するには、:first-childの擬似クラスを使います。

:first-childの擬似クラスでは、要素が最初の要素である場合にスタイルが適用されます。

#hoge p:first-child{
    color:red;
}

上記のコードでは、hogeのidの要素の下のp要素が最初の要素である場合に、文字色を赤色にしています。

最後の要素

最後の要素にスタイルを適用する場合には、:last-childの擬似クラスを使用します。

:last-childの擬似クラスでは、要素が最後の要素である場合にのみ、スタイルが有効となります。

#hoge p:last-child{
    color:green;
}

上記のコードでは、hogeというidの要素の下のp要素が最後の要素である場合にのみ、文字色を緑色にしています。

要素の限定

例えば、p:first-childやp:last-childの場合、p要素が最初や最後の要素である必要があります。

一方、:first-of-typeや:last-of-typeの擬似クラスにすると、この例ではpの中で最初と最後が判断されます。

#hoge p:first-of-type, #hoge p:last-of-type{
    color:blue;
}

上記のコードでは、hogeというidを持つ要素の下のp要素のうち、最初の要素と最後の要素の文字色を青色にしています。