トップページの中の セレクタの中の :first-of-type疑似クラス (E:first-of-type)

:first-of-type疑似クラス (E:first-of-type)

  • 最終更新:2009年7月 5日 15:07

CSS3で定義された:first-of-type疑似クラスは、ある要素の同じ子要素の最初の要素にスタイルを適用します。
これは、:nth-of-type()疑似クラスの:nth-of-type(1)と同じ扱いになります。

この疑似クラスを使う事で、例えば「定義リストの最初だけボーダーを消したい!」といった事が出来ちゃったりします。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

: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

こういったデザインの時にとても役立ちますね。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ