CSSの最初の要素や最後の要素の指定方法【現役エンジニアが解説】
今回は、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要素のうち、最初の要素と最後の要素の文字色を青色にしています。