CSS3 擬似クラスの解説

擬似クラスとは、特定の状態にある要素に対してスタイルを適用させるものです。 多くの種類がありますが、基本的な6つを紹介していきます。   :first-child 親要素の一番最初の直下の要素にのみにスタイルを適用させることができます。
p:first-child {
    background-color: red;
}

<div>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

</div>

  :last-child 親要素の一番最後の直下の要素にのみにスタイルを適用させることができます。
p:last-child {
    background-color: red;
}

<div>

<h3>この h3 要素は対象となりません</h3>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

</div>

  :first-of-type 親要素の一番最初の要素にのみにスタイルを適用させることができます。
p:first-of-type {
    background-color: red;
}

<div>

<h3>この h3 要素は対象となりません</h3>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

</div>

親要素である <div> の直下に<h3>があるため:first-childでは</h3>要素にスタイルを適用させることができませんが、first-of-typeは親要素の中にある中で一番最初の要素が対象なのでこのような場合でも要素にスタイルを適用させることができます。   :last-of-type 親要素の一番最後の要素にのみにスタイルを適用させることができます。
p:last-of-type {
    background-color: red;
}

<div>

<h3>この h3 要素は対象となりません</h3>

<p>この p 要素は対象となりません</p>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

</div>

  :nth-child() 子要素として先頭から()番目の要素のみにスタイルを適用させことができます。
p:nth-child(2) {
    background-color: red;
}

<div>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

</div>

()の中身を2nにすれば2の倍数(偶数)の全ての要素にスタイルを適用させることもでき、同様に2n+1なら奇数の全ての要素にスタイルを適用させることができます。   :nth-of-type() 子要素として指定した要素の先頭から()番目の要素のみにスタイルを適用させることができます。
p:nth-child(2) {
    background-color: red;
}

<div>

<h3>この h3 要素はカウントの対象となりません</h3>

<p>この p 要素は対象となりません</p>

<p>この p 要素の背景色は赤色になります</p>

<p>この p 要素は対象となりません</p>

</div>

   

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です