第12回 CSS3はここがすごい【セレクタ編2】テーブルレイアウトを卒業しよう
CSS3はここがすごい【セレクタ編2】
前回に引き続き、W3C Working Draftの中から新しく定義される予定のCSS3新セレクタについてご紹介します。
疑似クラス
CSS3では新しい疑似クラスが多数定義される予定です。
E:root
/*
E…要素
*/:rootはルートの要素、つまり最も上位の要素を指定します。HTMLなら<html>ですね。
E:nth-child(n)
/*
E…要素
(n)…n番目
*/E要素の親の中のn番目のE要素を指定します。ちょっとわかりづらい場合は「n番目のE要素」と考えてもいいかもしれません。括弧内のnで何番目かを整数で指定します。それ以外にこんな指定も可能。
E:nth-child(1)
/* 整数の場合は、そのままn番目 */
E:nth-child(2n+1)
/* nには0から順に整数が入り計算されるので、奇数番目指定 */
E:nth-child(odd)
/* 奇数番目指定、(2n+1)と同じ結果 */
E:nth-child(2n)
/* nには0から順に整数が入り計算されるので、偶数番目指定 */
E:nth-child(even)
/* 奇数番目指定、(2n)と同じ結果 */なんて便利なんでしょう！
こんなことをしたいときに、
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
<li>リスト項目4</li>
<li>リスト項目5</li>
<li>リスト項目6</li>
</ul>ul {
width: 300px;
}
ul li {
margin: 4px 0px;
}
ul li:nth-child(even) {
background: #D5F8B4;
}
これだけ書いておけばあとは<li>がいくつ増えてもOK！
ちなみにこの(n)の指定は、次のセレクタでも使用できます。
E:nth-last-child(n)
/*
E…要素
(n)…n番目
*/E要素の親の中の後から数えてn番目のE要素を指定します。
E:nth-of-type(n)
/*
E…要素
(n)…n番目
*/E要素の親の中の、E要素と兄弟かつ、同じ名前の要素のn番目のE要素を指定します。言葉だけだと意味不明ですね。こんな時に使います。
<div>
<h2>headline2</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2>headline2</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h2>headline2</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>div {
width: 500px;
font-family: Arial, Helvetica, sans-serif;
}
div h2:nth-child(odd) {
background: #A8AD80;
}
div h2:nth-child(even) {
background: #E6D4A7;
}
この例では、先ほどのE:nth-child(n)を使って、奇数番目と偶数番目の<h2>のbackgroundを別の色にしています。しかし背景色は全て同じになってしまいます。これは、間に入っている<p>もカウント対象になってしまっていることが原因です。そこで、<h2>のみをカウントしてくれるように、E:nth-of-type(n)を使います。
div {
width: 500px;
font-family: Arial, Helvetica, sans-serif;
}
div h2:nth-of-type(odd) {
background: #A8AD80;
}
div h2:nth-of-type(even) {
background: #E6D4A7;
}
するとこの通り。複数種類の要素が並列しているときにはこっちのほうがいいですね。
E:nth-last-of-type(n)
/*E…要素
(n)…n番目
*/
E要素の親の中の、E要素と兄弟かつ、同じ名前の要素の後から数えてn番目のE要素を指定します。E:nth-of-type(n)の対になります。
今回ご紹介した新セレクタが使えれば、独自のIDやクラスをぐっと減らすことができそうです。残念なのはブラウザーの実装がまだまだ追いついていないことですね。
今回、サンプルではGoogle Chrome 2を使いましたが、Safari 4 beta、Opera 9でも同様の結果を得ることができました。
CSS3.infoで使っているブラウザーのセレクタ対応状況テストができるのでみてみるのもいいかもしれません。
CSS3ではほかにも疑似クラスが増える予定ですが、今回はこの辺で。
では次回もお楽しみに。 （こう
）
お問い合わせ
メルマガ