知ってそうで知らないCSS3の便利な使い方【その1：構造疑似クラス編】

投稿日：2015年1月30日更新日：2023年12月6日

CSS3のセレクタは幾つもありますよね。
今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。

E:first-child

親要素の最初の子要素であるE要素に適用

E:first-of-type

兄弟関係にある最初のE要素に適用

E:first-childとE:first-of-typeの違いとサンプル

CSS

div.sample1 p:first-child {

background-color:rgba(51,51,51,1);

color:rgba(255,255,255,1);

}

div.sample1 h2:first-of-type {

color:rgba(204,0,0,1);

}

HTML

<div class="sample1">

<p>p要素1</p>

<p>p要素2</p>

<h2>h2要素1</h2>

<p>p要素3</p>

<p>p要素4</p>

</div>

デモ

p要素1

p要素2

h2要素1

p要素3

p要素4

E:last-child

親要素の最後の子要素であるE要素に適用

E:last-of-type

兄弟関係にある最後のE要素に適用

E:last-childとE:last-of-typeの違いとサンプル

CSS

div.sample2 p:last-child {

background-color:rgba(51,51,51,1);

color:rgba(255,255,255,1);

}

div.sample2 h2:last-of-type {

color:rgba(204,0,0,1);

}

HTML

<div class="sample2">

<p>p要素1</p>

<p>p要素2</p>

<h2>h2要素1</h2>

<p>p要素3</p>

<p>p要素4</p>

</div>

デモ

p要素1

p要素2

h2要素1

p要素3

p要素4

E:nth-child(n)

親要素のn番目の子要素であるE要素に適用

E:nth-of-type(n)

兄弟関係にあるn番目のE要素に適用

※補足
E:nth-child(n)とE:nth-of-type(n)のnの部分は、oddや2n+1で奇数を表し、evenや2nで偶数を表すこともできます。

E:nth-child(n)とE:nth-of-type(n)の違いとサンプル

CSS

div.sample3 p:nth-child(2n) {

background-color:rgba(51,51,51,1);

color:rgba(255,255,255,1);

}

div.sample3 h2:nth-of-type(odd) {

color:rgba(204,0,0,1);

}

HTML

<div class="sample3">

<p>p要素1</p>

<p>p要素2</p>

<h2>h2要素1</h2>

<p>p要素3</p>

<h2>h2要素2</h2>

<p>p要素4</p>

<p>p要素5</p>

<p>p要素6</p>

<h2>h2要素3</h2>

<p>p要素7</p>

<p>p要素8</p>

</div>