CSSの「疑似クラス」の書き方 再入門（CSS3対応版）(3ページ目)

:nth-child疑似クラス (CSS3)

要素αが、親要素の内部で「先頭からn番目の子要素として登場する場合」のみを対象にしてスタイルを適用します。

α:nth-child(n) { プロパティ: 値; }

例えば、HTMLが以下のように記述されている場合を考えます。ol要素とli要素で作った番号付きリストが8項目あります。

<ol>
   <li>ここは1番目の項目です。</li>
   <li>ここは2番目の項目です。</li>
   <li>ここは3番目の項目です。</li>
      　：　　　：　　　：
   <li>ここは8番目の項目です。</li>
</ol>

このとき、次のようにCSSを記述すると、

li:nth-child(2n)   { color: red; }
li:nth-child(2n+1) { color: green; }

リスト項目の「奇数番目」と「偶数番目」で配色を交互に変化させることができます。表示例は右図の通りです。

:nth-child疑似クラスのカッコ内には、数値だけを入れればその番目だけの要素を対象にできます。「3n」「3n+1」「3n+2」などの式を入れて、3つ毎に装飾を変化させることもできます。 詳しくは、記事「CSS3で偶数行・奇数行など「n番目」を限定装飾する」で解説していますので、そちらをご参照下さい。

:nth-last-child疑似クラス (CSS3)

要素αが、親要素の内部で「末尾からn番目の子要素として登場する場合」のみを対象にしてスタイルを適用します。

α:nth-last-child(n) { プロパティ: 値; }

例えば、HTMLが以下のように記述されている場合を考えます。ol要素とli要素で作った番号付きリストが8項目あります。

<ol>
   <li>ここは1番目の項目です。</li>
   <li>ここは2番目の項目です。</li>
   <li>ここは3番目の項目です。</li>
      　：　　　：　　　：
   <li>ここは8番目の項目です。</li>
</ol>

このとき、次のようにCSSを記述すると、

li:nth-last-child(-n+3) { color: red; }
li:nth-last-child(n+4)  { color: gray; font-size: smaller; }

リスト項目の「末尾から3つだけ」と「末尾から4つ目以降」とを分けて装飾できます。表示例は右図の通りです。

:nth-last-child疑似クラスのカッコ内に入れられる値は、先ほどの:nth-child疑似クラスと同じです。ただ、先頭からではなく末尾から数える点だけが異なります。 詳しくは、記事「CSS3で偶数行・奇数行など「n番目」を限定装飾する」で解説していますので、そちらをご参照下さい。

:nth-of-type疑似クラス (CSS3)

親要素に含まれる子要素のうち、同じ要素αの中で「先頭からn番目に登場する要素α」のみを対象にしてスタイルを適用します。

α:nth-of-type(n) { プロパティ: 値; }

先の:nth-child疑似クラスとは異なり、「兄弟関係にある他の要素」はカウントしません。他の要素の存在は無視して、「要素α」の存在だけをカウントします。

例えば、HTMLが以下のように記述されている場合を考えます。ここでは、「小見出し（h3要素）＋段落（p要素）2つ」のセットを2つ続けて記述しています。

<h3>■小見出しA</h3>
<p>最初の段落です。</p>
<p>2番目の段落です。</p>
<h3>■小見出しB</h3>
<p>最初の段落です。</p>
<p>2番目の段落です。</p>

このとき、次のようにCSSを記述すると、

p:nth-of-type(2n)   { color: gray; background-color: #eeeeee; }
p:nth-of-type(2n+1) { color: red;  background-color: #ffffcc; }

小見出し（h3要素）の存在を無視して、奇数番目の段落（p要素）は赤色に、偶数番目の段落は灰色に装飾されます。表示例は右図の左側の通りです。

右図の右側は、比較する参考として、:nth-child疑似クラスを使った場合の表示例です。

※:nth-of-type疑似クラスと、:nth-child疑似クラスの違い
先ほどのCSSソースで、「:nth-of-type」ではなく「:nth-child」を使うと、すべての要素がカウント対象になるため、右図の右側のように、装飾がずれてしまいます。

:nth-of-type（左側）では、「p要素の奇数番目を赤色に」・「p要素の偶数番目を灰色に」装飾するのに対して、:nth-child（右側）では、「奇数番目の要素がp要素だった場合には赤色に」・「偶数番目の要素がp要素だった場合には灰色に」装飾します。

:nth-last-of-type疑似クラス (CSS3)

親要素に含まれる子要素のうち、同じ要素αの中で「末尾からn番目に登場する要素α」のみを対象にしてスタイルを適用します。

α:nth-last-of-type(n) { プロパティ: 値; }

先の:nth-last-child疑似クラスとは異なり、「兄弟関係にある他の要素」はカウントしません。他の要素の存在は無視して、「要素α」の存在だけをカウントします。

例えば、HTMLが以下のように記述されている場合を考えます。ここでは、「小見出し（h3要素）＋段落（p要素）」のセットを4つ続けて記述しています。

<h3>■小見出しA</h3>
<p>段落です。</p>
<h3>■小見出しB</h3>
<p>段落です。</p>
<h3>■小見出しC</h3>
<p>段落です。</p>
<h3>■小見出しD</h3>
<p>段落です。</p>

このとき、次のようにCSSを記述すると、

p:nth-last-of-type(-n+2){ color: gray; background-color: #eeeeee; }
p:nth-last-of-type(n+3) { color: red;  background-color: #ffffcc; }

小見出し（h3要素）の存在を無視して、末尾から2つの段落（p要素）は灰色になり、残りの段落は赤色に装飾されます。表示例は右図の左側の通りです。

右図の右側は、比較する参考として、:nth-last-child疑似クラスを使った場合の表示例です。

※:nth-last-of-type疑似クラスと、:nth-last-child疑似クラスの違い
先ほどのCSSソースで、「:nth-last-of-type」ではなく「:nth-last-child」を使うと、すべての要素がカウント対象になるため、装飾が切り替わる境目がずれてしまいます。

:nth-last-of-type（左側）では、「p要素のうち、末尾から2つの要素を灰色に」・「p要素のうち、末尾から3つ目以降を赤色に」装飾します。:nth-last-child（右側）では、「末尾から2つの要素がp要素だった場合には灰色に」・「末尾から3つ目以降の要素がp要素だった場合には赤色に」装飾します。

:empty疑似クラス (CSS3)

要素αが何の子要素を何も持たない場合のみ、スタイルを適用します。

α:empty { プロパティ: 値; }

この場合の「子要素」とは、ただの文字列も含みます。以下のようなHTMLが「子要素を持たない要素」です。このような要素のみが適用対象です。

<p></p>

以下の場合は、いずれも「子要素を持つ要素」です。これらは、:empty疑似クラスの適用対象にはなりません。

<p>中身あり</p>
<p><strong>中身あり</strong></p>
<p>カラでは<em>ありません</em></p>

上記の計4行のHTMLに対して、次のようにCSSを記述すると、

p { background-color: #ffffcc; padding: 1px; }
p:empty { border: 2px solid red; }

要素の中身が空であるp要素にのみ枠線が引かれます。表示例は右図の通りです。

:root疑似クラス (CSS3)

要素αが「ルート要素」である場合のみ、スタイルを適用します。HTMLの場合、「ルート要素」は「html要素」ですから、この疑似クラスを活用する機会はあまりないでしょう。

α:root { プロパティ: 値; }

サンプルは省略します。

:not疑似クラス (CSS3)

条件βが成立しない要素αに対してのみスタイルを適用します。

α:not(β) { プロパティ: 値; }

例えば、HTMLが以下のように記述されている場合を考えます。ここでは、button要素で作ったボタンが5つあり、そのうち2つにはdisabled属性が付加されて無効化されています。

<button>有効なボタン1</button><br>
<button>有効なボタン2</button><br>
<button disabled>無効なボタン3</button><br>
<button disabled>無効なボタン4</button><br>
<button>有効なボタン5</button><br>

上記のように「有効なボタン」と「無効化されたボタン」が混在する場合、以下のようにCSSを記述すると、無効化されていないすべてのボタン（button要素）の文字サイズが1.5倍で表示されます。

button:not([DISABLED]) { font-size: 1.5em; }

button要素などで作成したボタンを無効化するには、disabled属性を加えます。しかし、有効化するための「enabled属性」などは存在しません（何も書かなければ標準で有効状態ですから）。そのため、「有効なボタンだけを対象に装飾したい」と考えても、「有効にする属性が付加された要素だけを対象にする」といった記述方法が採れません。そこで、この:not疑似クラスを使って、「無効化されている要素以外」を対象にすることで、有効なボタンだけを対象にしてスタイルを適用できます。

このように、指定した条件の「否定」を対象にしてスタイルを適用できます。:not疑似クラスには、上記の他にも次のような書き方があります。

以下のように記述すると、p要素以外のすべての要素に緑色の二重下線が引かれます。h1要素やdiv要素など、p要素以外のあらゆる要素が対象になります。

:not(p) { border-bottom: 3px double green; }

以下のように記述すると、appleクラス以外のすべてのp要素が青色で表示されます。この場合は「p要素」限定です。最初の「p」をなくして「:not(.apple)」と書けば、あらゆる要素を対象にできます。

p:not(.apple) { color: blue; }

以下のように記述すると、grapeというID名以外のすべてのp要素が斜体で表示されます。

p:not(#grape) { font-style: italic; }

以下のように記述すると、マウスが上に載って『いない』状態のすべてのa要素が太字で表示されます。

a:not(:hover) { font-weight: bold; }

このように、要素名だけではなく、class名・id名や他の疑似クラスの適用状態をも条件に指定して、それらの否定状態を適用対象にできます。

疑似クラスには、まだまだ便利な書き方が用意されています。続いて、リンクを対象にした疑似クラスや、ユーザのアクションを対象にした疑似クラスをご紹介致します。