[CSS] 勘違いしている擬似クラスの使い方

  CSS

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
CSS3 Cascading Style Sheets カスケーディング スタイルシート CSS

「あれ!?擬似クラスが適応されない・効かない」や「思ったところに擬似クラスが適応されていない」など擬似クラスの使い方にお困りではないでしょうか?私も同じ経験があります。そこで今回は、first-childlast-childなどの擬似クラスの使い方についてご紹介したいと思います。

:first-childの使い方

:first-childの使用場面は、ある要素内で最初に書かれている子要素にスタイルが適用されます。

:first-childの間違いやすい記述

下記のようにdivの中に見出しタグとpタグがあった場合、p:first-childと記述して最初のpタグに赤色の文字となるようにスタイルを適用させます。しかし、これではスタイルは適応されません。

p:first-child {
	color:#FF0000;
}
<div>
<h2>見出し</h2><!--最初の子要素-->
<p>スタイルの適用先</p>
<p>テキストテキストテキスト</p>
</div>

上記のように記述すると、親要素divの中で最初の要素は見出しタグであるh2という認識になります。
なぜなら親要素の中の最初のセレクタはh2タグだからです。

divの子要素の最初のpにスタイルを適応させようと思って記述したのに上手くいきません。

対応策としては下記のように他の擬似クラスや隣接セレクタなどを用いる方法があります。

/*種類に関係なく要素を数えてスタイルを適応*/
p:nth-child(2) {
	color:#FF0000;
}

/*該当する最初の要素を数えてスタイルを適応*/
p:nth-of-type(1) {
	color:#FF0000;
}

/*該当する最初の要素からスタイルを適応*/
p:first-of-type {
	color:#FF0000;
}
/*隣接セレクタでスタイルを適応*/
h2 + p {
	color:#FF0000;
}

classやidを用いた:first-childの場合

下記のようにdivにクラスを設定して、p.hogeに対して:first-childと記述して最初のpタグに赤色の文字となるようにスタイルを適用させます。しかし、これではスタイルは適応されません。

p.hoge:first-child {
	color:#FF0000;
}
<div>
<h2>見出し</h2>
<p class="hoge">スタイルの適用先</p>
<p class="hoge">テキストテキストテキスト</p>
</div>

上記のように記述しても、擬似クラスにclassは扱うことができないため、スタイルを適応させることができません。

idに関しては説明するまでもなく、一か所にしか設定できないため、特定した要素をidが表わすため擬似クラスは使うまでもないと言えます。

:last-childの使い方

:last-childの使用場面は、ある要素内で最後に書かれている子要素にスタイルが適用されます。

:last-childの間違いやすい記述

下記のようにdivの中に見出しタグとpタグとul・liタグがあった場合、p:last-childと記述して最後のpタグに赤色の文字となるようにスタイルを適用させます。しかし、これではスタイルは適応されません。

p:last-child {
	color:#FF0000;
}
<div>
<h2>見出し</h2>
<p>テキストテキストテキスト</p>
<p>スタイルの適用先</p>
<ol><!--最後の子要素-->
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ol>
</div>

:first-childと同じような考え方で上記のように記述すると、親要素divの中で最後の要素はolタグという認識になります。
なぜなら親要素の中の最後のセレクタはolタグだからです。

ここでさらに勘違いしがちなのがliタグです。
pタグから見て1つ下の階層にliは存在しているため、ここではolタグ1つ分の子要素が最後の要素となります。

divの子要素の最後のpにスタイルを適応させようと思って記述したのに上手くいきません。

対応策としては下記のように他の擬似クラスや隣接セレクタなどを用いる方法があります。

/*種類に関係なく要素を数えてスタイルを適応*/
p:nth-last-child(2) {
	color:#FF0000;
}
/*該当する最後の要素を数えてスタイルを適応*/
p:nth-last-of-type(1) {
	color:#FF0000;
}

/*該当する最後の要素からスタイルを適応*/
p:last-of-type {
	color:#FF0000;
}
/*隣接セレクタでスタイルを適応*/
h2 + p + p {
	color:#FF0000;
}

p + p {
	color:#FF0000;
}

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

コメントを残す

*