:nth-child() クラス
:nth-child() クラスは、カッコ内で指定された番号、キーワード、式によって該当する子エレメントにスタイルを反映する擬似クラスです。
この疑似クラスが機能するには、対象となるエレメントが複数であることが条件です。
このクラスによって、1行ずつ背景色を変えるといったことができます。詳しくは引数による効果
を参照してください。
li:nth-child(2){
background-color: #ccc;
}
詳しくは Example を参照してください
この例では、複数ある <li> エレメントの 2 番めのエレメントにスタイルを反映します。
ページ内 Index
引数による効果
番号による指定
指定順番号の子エレメントにスタイルを反映します。
詳しくは Example を参照してください
div :nth-child(){...}
とした場合は、
何のエレメントかは関係なく、divエレメントの子エレメントで該当する順番のエレメントが対象になります。
似た疑似エレメントに:nth-of-type()があります。 :nth-of-type()の場合は、複数の同じエレメンの中で何番目かになります。
キーワードによる指定
キーワード指定には以下のような奇数番号、偶数番号指定があります。
- odd... 奇数番号
- even... 偶数番号
式による指定
式はAn+Bが設定されています。Anによって何番飛びかを指定します。
3nでは3番毎にという意味です。
BはAnを基準にそこから何番目かを指定します。ただし、Bがある場合はn=0番目から数えます。
構文(Syntax)
CSS
HTMLElement:nth-child() { style_propat: value; ... }
DOM ( JavaScript )
疑似クラスはDOM ( JavaScript )から操作できません。
スタイルのみの操作は擬似クラスを利用したほうが簡易です。
in HTML
in JavaScript
Example
:nth-child()の例です。tableの偶数個目の子エレメントが対象になります。
関連する疑似クラス
1つまたは複数あるエレメントを選択する疑似クラスには以下があります。
- :first-child... 複数あるエレメントの内で最初のエレメント(要素)が対象
- :first-of-type... 1つまたは複数あるエレメントの内で最初のエレメント(要素)が対象
- :last-child... 複数あるエレメントの内で最後のエレメント(要素)が対象
- :last-of-type... 1つまたは複数あるエレメントの内で最後のエレメント(要素)が対象
- :nth-child()... カッコ内の番号、キーワード、式に該当する子エレメントが対象
- :nth-last-child()... 複数あるエレメントのうちで、カッコ内の番号、キーワード、式に後ろから数えて該当するエレメントが対象
- :nth-last-of-type()... カッコ内の番号、キーワード、式に後ろから数えて該当する子エレメントが対象
- :nth-of-type()... 複数あるエレメントのうちで、カッコ内の番号、キーワード、式に該当するエレメントが対象