備忘録的プログラミングリファレンス

:nth-of-type() クラス

 :nth-of-type() クラスは、カッコ内で指定された番号、キーワード、式によって該当するエレメントにスタイルを反映する擬似クラスです。 前から数えて該当するエレメントにスタイルを反映します。

 一覧を行ごとに背景色を変えるには便利な疑似クラスです。

:nth-of-type() 例
li:nth-of-type( even ){
	background-color: #ccc;
}
詳しくは Example を参照してください。

 上記の例は、リストの偶数個目のエレメントの背景色が #ccc に設定されます。

:nth-of-type() クラスについて

番号で指定

 指定順番号の子エレメントにスタイルを反映します。同じエレメントの何番目かになります。

:nth-of-type() における数値例
詳しくはExampleを参照してください

 似た疑似エレメントに:nth-child()があります。 :nth-child()の場合は、何のエレメントかは関係なく子エレメンの中で何番目かになります。

キーワードによる指定

 キーワード指定には以下のような奇数番号、偶数番号指定があります。

  • odd... 奇数番号
  • even... 偶数番号
:nth-of-type()におけるキーワード例

式による指定

 式はAn+Bが設定されています。Anによって何番飛びかを指定します。
 3nでは3番毎にという意味です。
 BはAnを基準にそこから何番目かを指定します。ただし、Bがある場合はn=0番目から数えます。

:nth-of-type()における式の例

構文(Syntax)

CSS

HTMLElement:nth-of-type() {
  style_propat: value;
	...
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。

 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

in HTML


in JavaScript


Example

 :nth-of-type()の例です。divの子エレメント中で、複数ある子エレメントの偶数個目の背景色が設定さます。