CSS 3のセレクタ:スタイルシートを繰り返し適用する

エ・ビスコム・テック・ラボ
2009-01-09 22:34:01
  • このエントリーをはてなブックマークに追加

 前回までに紹介したセレクタ、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()を利用すると、スタイルシートの設定を3要素おきに適用したり、最初の3要素だけに適用するといった使い方もできる。

 ブラウザはFirefox 3.1(ベータ版)、Safari 3.1、Google Chrome、Operaが対応しているので表示を確認してみてほしい。

スタイルシートの設定を3要素おきに適用する

 スタイルシートの設定を3要素おきに適用するためには、前々回の記事「CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用」で紹介した「指定したナンバーの項目に色をつける」機能を応用する。

 そこでまずは、この機能を利用してリストの1つ目から3つ目の項目の背景色を指定してみよう。ここでは:nth-child()で何番目の項目にスタイルシートの設定を適用するかを指定して、1つ目の項目は黄色、2つ目は水色、3つ目は緑色で表示するように指定している。

サンプル01 サンプル01(画像をクリックすると拡大します)
li:nth-child(1){
background-color: yellow;
}

li:nth-child(2){
background-color: skyblue;
}

li:nth-child(3){
background-color: limegreen;
}
  • テキスト01
  • テキスト02
  • テキスト03
  • テキスト04
  • テキスト05
  • テキスト06
  • テキスト07
  • テキスト08
  • テキスト09
  • テキスト10
ブラウザで表示を確認する

 このスタイルシートの設定を3項目おきに繰り返し適用するように設定したい。そこで、:nth-child(〜)で指定した番号に、次のように「3n+」を追加して記述する。すると、リストの背景が3項目おきに黄色、水色、緑色で表示される。

サンプル02 サンプル02(画像をクリックすると拡大します)
li:nth-child(3n+1){
background-color: yellow;
}

li:nth-child(3n+2){
background-color: skyblue;
}

li:nth-child(3n+3){
background-color: limegreen;
}
ブラウザで表示を確認する

 このように、:nth-child()、:nth-last-child()、:nth-of-type()、nth-last-of-type()の4つのセレクタは、スタイルシートの設定を何番目の要素に適用するのか、何要素おきに適用するのかを次の形式で指定することができる。

αn+β
  • αn:何要素おきに適用するかを指定
  • β:何番目の要素に適用するかを指定

 「αn」と「β」の両方またはどちらか一方を必ず指定する必要がある。

 たとえば、サンプル01で利用した「:nth-child(1)」は「β」だけを記述したかたちで、1つ目の要素にだけスタイルシートを適用する。

 サンプル02で利用した「:nth-child(3n+1)」は「αn」と「β」の両方を記述したかたちだ。「αn」では、スタイルシートを何要素おきに適用するかを「α」で指定する。「n」には0から順に0、1、2……と整数が入ることになっているので、「:nth-child(3n+1)」と指定すると、1つ目、4つ目、7つ目……の要素にスタイルシートを適用することができる。

 なお、サンプル02の「:nth-child(3n+3)」は、次のように「β」部分を省略して「:nth-child(3n)」と記述することもできる。

サンプル03 サンプル03(画像をクリックすると拡大します)
li:nth-child(3n+1){
background-color: yellow;
}

li:nth-child(3n+2){
background-color: skyblue;
}

li:nth-child(3n){
background-color: limegreen;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]