Lesson 10 擬似クラスで柔軟なコーディング - HTML5＋CSS3 次世代Webコーディングの超・最新動向・CSS3編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

CSS3編

	Lesson 10			擬似クラスで 柔軟なコーディング
	制作・文			制作・文／河原 覚（株式会社アークフィリア）

擬似クラスとは、各要素の状態によって選択するセレクタだ。CSS3では16もの新しい擬似クラスが追加されている。条件が複雑なものもあるが、活用すればより柔軟なコーディングが可能になるだろう。

01

擬似クラスとは、各要素が特定の条件を満たした状態の時に、スタイルを適用するものだ。訪問済みリンクに対してスタイルを適用するvisitedや、オンマウス時にスタイルを適用するhoverなどがおなじみだろう。このような擬似クラスが、CSS3では非常に多く追加されており、これまで以上に便利になっている。

子要素に関する擬似クラスから見ていこう。新しく追加された擬似クラスは4つだ。last-childは子要素の中で一番後ろのものを選択する【1-1】。nth-child(n)は(n)に指定された順番に該当する子要素を選択する【1-2】。last-nth-child(n)はnthchildとは逆順に該当する子要素を選択する【1-3】。only-childは含まれる子要素が1つしかない場合に選択する擬似クラスだ【1-4】。また、empty 擬似クラスは子要素を持たない要素を選択する【1-5】。


【1-1】last-child では末尾のものが選択される



【1-2】last-child(2)とすると上から2番目が選択される



【1-3】nth-last -child(2) では下から2番目が選択される



【1-4】only-childとすると、子要素がひとつの場合は選択され（上）、子要素が複数の場合は選択されない（下）



【1-5】emptyでは中身にまったく何もないものが選択される

02

兄弟要素に関する擬似クラスは、5つ追加された。nth-of-type(n)は(n)に指定された順番に該当する兄弟要素をすべて選択する【2-1】。nth-last-of-type(n)はその逆順となる【2-2】。first-of-typeは兄弟要素のうち、先頭のものを選択する【2-3】。last-of-typeは末尾のものを選択する【2-4】。only-of-typeは該当の要素に兄弟がない状態、つまり、その種類の要素が1 つしかない要素を選択する【2-5】 。


【2-1】nth-of- type(2) では上からの2番目の兄弟要素がそれぞれ選択される



【2-2】nth-last-oftype(2) では下からの2番目の兄弟要素がそれぞれ選択される



【2-3】first-of-typeでは先頭の兄弟要素が選択される



【2-4】last-of-typeでは末尾のものが選択される



【2-5】only-of-typeでは兄弟要素がそれぞれひとつの場合は選択され（上）、2つ以上ある兄弟要素は選択されない（下）

03

target 擬似クラスは、アンカーリンクの対象となる要素を選択するものだ。これにより、アンカーリンクにとんだ際に、目的のアンカー部分を目立たせることができる【3-1】。


【3-1】targetでアンカーリンクの対象となる要素をスタイリング。ページ内アンカーへ移動していない場合（左）、#Target2アンカーへ移動したあと（右）

04

ボタンやチェックボックスなど、フォームのUI要素の状態に関する擬似クラスは３つ追加された。enabled擬似クラスは要素にdisabled 属性がない場合【4-1】 、disabled擬似クラスはdisabled属性が設定されている場合に選択する【4-2】。checked擬似クラスはチェックボックス、またはラジオボタンがチェックされている場合を選択する【4-3】。


【4-1】enabled ではdisabled属性のないものが選択される（ここでは隣接要素のスタイルを設定）



【4-2】disabledではdisabled属性のあるものが選択される（ここでは隣接要素のスタイルを設定）



【4-3】checkedではチェックされているものが選択される（ここでは隣接要素のスタイルを設定）

05

not(s)擬似クラスは(s)部分に指定されたセレクタ表現ではない、要素を選択する擬似クラスだ。たとえば、「クラスがAではない要素」を選択する場合には【5-1】のように記述する。

ほかにroot擬似クラスもあり、これは文章中のルート要素となる要素を選択する。HTML の場合はhtml 要素、CSS をXMLなどに適用する場合にはそのXMLのルート要素となる要素が選択される。


【5-1】not(.A)とするとクラスがAではない2つが選択される

06

これらの擬似クラスを使ってできる表現を見ていこう。これまで中段にのみ罫線があるタイプのリストをつくる際に、最後尾の要素にクラスを設定することがあったが、last-childを使うとより便利に記述することができる【6-1】。この書き方であれば、CMSなどでリストの個数が可変するような場合にも対応できる。


【6-1】last-childで末尾の要素のみborderを取り消せば、末尾のみボーダーがない状態になる

07

リストの可読性を上げるための縞模様もつくることができる。nth-childは間隔を指定できるので、1段おきに色をつける縞模様や【7-1】、4段おきに色をつけて段数の多いリストを見やすくするといった表現も可能だ【7-2】。


【7-1】nth-child(2nt1)とすることで1段おきに背景がつく。nは0からはじまる点に注意



【7-2】nth-child(5n+5)とすると4段おきに背景がつく