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

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

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

CSS3で定義された:nth-of-type()疑似クラスは、ある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用します。
:nth-child()疑似クラスが対象になる要素同士が隣接している必要が有ったのに対して、:nth-of-type()疑似クラスは間接していても適用されます。

これにより、例えば「定義リストをしましまにしたい!」なんて事が出来ちゃったりします。

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

:nth-of-type()疑似クラスのサンプル

p:nth-of-type(3n+1) {
  background: #f5dada;
}

p:nth-of-type(3n+2) {
  background: #ddf5da;
}

p:nth-of-type(3n+3) {
  background: #dae0f5;
}
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>

<h4>見出し</h4>
<p>テキスト</p>

<h4>見出し</h4>
<p>テキスト</p>
<p>テキスト</p>

<h4>見出し</h4>
<p>テキスト</p>

<h4>見出し</h4>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>

:nth-child()疑似クラスの二つ目のサンプルのように、1~3番目の指定が繰り返して表示されますが、間にh4要素があっても最初のp要素から数えます。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

テキスト

テキスト

テキスト

テキスト

見出し

テキスト

見出し

テキスト

テキスト

見出し

テキスト

見出し

テキスト

テキスト

テキスト

7つでやれば、レインボーに出来ますね(笑
さて、次のサンプルは冒頭で書いた定義リストをしましまにするサンプルです。

dl {
  margin-bottom: 50px;
}

dl dt {
  clear: both;
  float: left;
  width: 80px;
  padding: 10px 0 10px 10px;
}

dl dd {
  padding: 10px 10px 10px 85px;
  border-top: 1px dotted #999;
}

dl dd:nth-of-type(odd) {
  background: #dae0f5;
}

dl dd:nth-of-type(1) {
  border-top: 0;
}
<dl>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
<dt>dt text</dt>
<dd>dd text</dd>
</dl>

横並びにする指定が色々ありますが、まずはベースとなる指定をdt要素やdd要素にし、その後に:nth-of-type()疑似クラスを使って奇数行にだけ背景色が付くようにしています。
また、最初のdd要素にはborder-top: 1px dotted #999;の宣言が適用されないように、dl dd:nth-of-type(1)に上書き用の宣言をする事でボーダーを消しています。
ちなみにこの書き方は、dl dd:first-of-typeと書くのと同じになります。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
dt text
dd text
dt text
dd text
dt text
dd text
dt text
dd text
dt text
dd text
dt text
dd text
dt text
dd text
dt text
dd text

IEで見ると、色気の無い横並びの定義リストで一番最初のdd要素のborder-top: 1px dotted #999;の宣言も残ってますが、それ以外の対応しているブラウザで確認するとしましまになっているのが分かります。

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

このページの上部へ