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

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

奇数と偶数の要素にスタイルシートを適用する

 前々回の記事「CSS 3のセレクタ:最初と最後、偶数と奇数の要素にスタイルシートを適用」では、:nth-child()などのセレクタに「odd」または「even」と指定して、奇数と偶数の要素にスタイルシートを適用する方法を紹介した。この「odd」と「even」は「αn+β」の形に置き換えることができ、「odd」は「2n+1」、「even」は「2n」と記述する。

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

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

最初の3つの要素にスタイルシートを適用する

 「αn+β」では、「α」にマイナス値を指定することもできる。ただし「αn+β」の算出値は0以上の値だけが有効だ。このルールを利用して「-n+3」と指定すると、最初の3つの要素にだけスタイルシートを適用することができる。

 「n」には0から順に0、1、2、3、4……と整数が入るので、「-n+3」の算出値は3、2、1、0、-1……となる。算出値は0以上の値が有効であるため、スタイルシートは3つ目、2つ目、1つ目の要素に適用される。

サンプル05 サンプル05(画像をクリックすると拡大します)
li:nth-child(-n+3){
background-color: yellow;
}
ブラウザで表示を確認する

 これを利用することで、スタイルシートでリストの最初の3項目に新着マークを付けるといったこともできるようになる。

サンプル06 サンプル06(画像をクリックすると拡大します)
ul{
list-style-type: none;
margin: 0;
padding: 0;
}

li{
padding: 5px 5px 5px 25px;
}

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