:first-of-type疑似クラス (E:first-of-type)
CSS3で定義された:first-of-type疑似クラスは、ある要素の同じ子要素の最初の要素にスタイルを適用します。
これは、:nth-of-type()疑似クラスの:nth-of-type(1)
と同じ扱いになります。
この疑似クラスを使う事で、例えば「定義リストの最初だけボーダーを消したい!」といった事が出来ちゃったりします。
- 対応ブラウザ
-
:first-of-type疑似クラスのサンプル
dl dt {
padding-top: 10px;
border-top: 3px double #95c810;
}
dl dt:first-of-type {
padding-top: 0;
border-top: 0;
}
dl dd {
margin-bottom: 10px;
}
<dl>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>2009年11月03日</dt>
<dd>文化の日らしいです。お休みです。</dd>
<dt>2009年11月23日</dt>
<dd>勤労感謝の日らしいです。お休みです。</dd>
<dt>2009年12月23日</dt>
<dd>天皇誕生日らしいです。お休みです。</dd>
<dt>2009年12月24日</dt>
<dd>クリスマスイブです。心はお休みですが休む必要はないかもしれません...orz</dd>
</dl>
最初のdt要素だけ、paddingとborder-topの指定を上書きしています。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- dt text
- dd text
- 2009年11月03日
- 文化の日らしいです。お休みです。
- 2009年11月23日
- 勤労感謝の日らしいです。お休みです。
- 2009年12月23日
- 天皇誕生日らしいです。お休みです。
- 2009年12月24日
- クリスマスイブです。心はお休みですが休む必要はないかもしれません...orz
こういったデザインの時にとても役立ちますね。