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

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

セレクタ :*-of-type

 :nth-child()などの他にも、Firefox 3.5はCSS 3のセレクタである:first-of-type、:last-of-type、:only-of-type をサポートした。:first-of-type は:nth-of-type(1)、:last-of-typeは:nth-last-of-type(1)、:only-of-typeは:first-of-child:last-of-childと指定した場合と同じように機能する。

 これらのセレクタを利用すると、最初と最後の見出しだけデザインを変えるといったことができるようになる。たとえば、次のサンプルでは最初の見出しを緑色で、最後の見出しを水色で、それ以外の見出しを黄色で表示している。

 詳しくは「CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例」を参照してほしい。

Firefox 3.5の表示 Firefox 3.5の表示
h2{
background-color: yellow;
}

h2:first-of-type{
background-color: limegreen;
}

h2:last-of-type{
background-color: skyblue;
}

見出しA

テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。

…略…

見出しD

テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。テキストです。

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