Firefox 3.5のCSS対応:Webフォント、メディアクエリ、セレクタ

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

セレクタ :nth-*

 CSS 3のセレクタである:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()をサポートしたことにより、偶数番目の要素のデザインだけを変えるなど、スタイルシートの設定をより細かく適用できるようになった。これらのセレクタはCSS 3の草案「Selectors」で提案されている。

 たとえば、次のサンプルでは:nth-child()を利用して、リストの各項目を3つおきに黄色、水色、緑色で表示するように指定している。

Firefox 3.5の表示 Firefox 3.5の表示
li:nth-child(3n+1)      {
        background-color: yellow;
        }

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

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

参照記事

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]