従来のCSSセレクタに加えて、CSS3で新たに使用できるセレクタが登場しているので、比較的使いそうな擬似クラスや属性セレクタなどをいくつか紹介します。

擬似クラスセレクタ

擬似クラスを使用した指定は、結構高い頻度で使用するかと思います。

:first-child

これは、同じ階層にある全ての要素の中にある最初の要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある最初の要素が赤文字になるという指定になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
</div>

/*CSS*/
.example :first-child {
  color: red;
}

:last-child

これは、同じ階層にある全ての要素の中にある最後の要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある最後の要素が赤文字になるという指定になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
</div>

/*CSS*/
.example :last-child {
  color: red;
}

:first-of-type

これは、同じ階層にある同じ要素の中で最初に出てくる要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある最初のp要素が赤文字になるという指定になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
</div>

/*CSS*/
.example p:first-of-type {
  color: red;
}

:last-of-type

これは、同じ階層にある同じ要素の中で最後に出てくる要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある最後のp要素が赤文字になるという指定になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
</div>

/*CSS*/
.example p:last-of-type {
  color: red;
}

:nth-child(n)

これは、同じ階層にある全ての要素の中で最初から数えて何番目の要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある3番目の要素が赤文字になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

/*CSS*/
.example :nth-child(3) {
  color: red;
}

:nth-last-child(n)

これは、同じ階層にある全ての要素の中で最後から数えて何番目の要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある最後から3番目の要素、つまり1番目の要素が赤文字になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

/*CSS*/
.example :nth-last-child(3) {
  color: red;
}

:nth-of-type(n)

これは、同じ階層にある同じ要素の中で最初から数えて何番目の要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある3番目の要素が赤文字になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

/*CSS*/
.example p:nth-of-type(3) {
  color: red;
}

:nth-last-of-type(n)

これは、同じ階層にある同じ要素の中で最後から数えて何番目の要素に適用するという指示になります。以下のような指定をした場合、「.example」の中にある最後から3番目の要素、つまり1番目の要素が赤文字になります。

<div class="example">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

/*CSS*/
.example p:nth-last-of-type(3) {
  color: red;
}

「:nth-child(n)」「:nth-last-child(n)」「:nth-of-type(n)」「:nth-last-of-type(n)」にある(n)の部分には、数値以外にも代入することができます。

:nth-child(even)偶数番目の要素にスタイルを付ける
:nth-child(odd)奇数番目の要素にスタイルを付ける
:nth-child(2n)2の倍数番目の要素にスタイルを付ける
:nth-child(2n+1)2の倍数番目の直後の要素にスタイルを付ける
:nth-child(n+2)2番目以降の要素にスタイルを付ける

「n」は0から数えるため、2n+1というのは2×0＋1となり、1番目の要素にもスタイルが適用されます。

否定擬似クラスセレクタ

この擬似クラスは、条件に一致しない要素に対してスタイルを適用させるためのものです。

:not()

以下のような指定をした場合、p要素以外、つまりstrong要素が赤文字になります。

<div class="example">
  <p>テキスト<strong>p要素以外を赤文字</strong>テキストテキスト</p>
</div>

/*CSS*/
.example :not(p) {
  color: red;
}

:not(:last-child)

以下のような指定をした場合、p要素で最後の要素以外が赤文字になります。

<div class="example">
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
  <p>テキストテキストテキスト</p>
</div>

/*CSS*/
.example p:not(:last-child) {
  color: red;
}

属性セレクタ

CSS3から使用できるようになった属性セレクタをいくつか挙げてみます。

クラス属性「example」を含む場合

これは、「example」という文字列を含むクラス属性がついた要素に対してスタイルを適用させます。

<p class="example">テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>

/*CSS*/
[class*="example"] {
  color: red;
}

クラス属性が「example」で始まる場合

これは、「example」という文字列から始まるクラス属性がついた要素に対してスタイルを適用させます。以下のような場合は、1番目と3番目が赤文字になります。

<p class="example">テキストテキストテキスト</p>
<p class="xxx example">テキストテキストテキスト</p>
<p class="example-xxx">テキストテキストテキスト</p>

/*CSS*/
[class～="example"] {
  color: red;
}

クラス属性が「example」で終わる場合

これは、「example」という文字列で終わるクラス属性がついた要素に対してスタイルを適用させます。以下のような場合は、1番目と2番目が赤文字になります。

<p class="example">テキストテキストテキスト</p>
<p class="xxx example">テキストテキストテキスト</p>
<p class="example-xxx">テキストテキストテキスト</p>

/*CSS*/
[class＄="example"] {
  color: red;
}

このように、CSS3から使えるようになったセレクタを利用して条件を指定してスタイルをしていけば、わざわざ個別にクラスなどを用意してスタイルを適用させるといった面倒な作業もしなくて済みます。

おすすめの記事