疑似クラスnth-child()は「要素:nth-child()」の他、「セレクタ:nth-child()」という使い方ができる。
しかし「n番目」を数えるときは、「セレクタ単位」ではなく「セレクタが付いている要素単位」である。
目次
.blue:nth-child()が効かない
HTML
- 赤 (font-size : 16px)
- 赤 (font-size : 20px)
- 赤 (font-size : 24px)
- 青 (font-size : 28px)
- 青 (font-size : 32px)
- 青 (font-size : 36px)
CSS
.red:nth-child(1) {
font-size: 16px;
}
.red:nth-child(2) {
font-size: 20px;
}
.red:nth-child(3) {
font-size: 24px;
}
/* 以下は、いずれも効かない (の文字サイズが変わらない)*/
.blue:nth-child(1) {
font-size: 28px;
}
.blue:nth-child(2) {
font-size: 32px;
}
.blue:nth-child(3) {
font-size: 36px;
}
.blue:nth-child()が効く
HTML
- 赤 (font-size : 16px)
- 赤 (font-size : 20px)
- 赤 (font-size : 24px)
- 青 (font-size : 28px)
- 青 (font-size : 32px)
- 青 (font-size : 36px)
CSS
.red:nth-child(1) {
font-size: 16px;
}
.red:nth-child(2) {
font-size: 20px;
}
.red:nth-child(3) {
font-size: 24px;
}
/* .blueは.redと同じ直下の- 要素なので、.blueの連番は4から */
.blue:nth-child(4) {
font-size: 28px;
}
.blue:nth-child(5) {
font-size: 32px;
}
.blue:nth-child(6) {
font-size: 36px;
}
おまけ : 親が異なるとき
以下の場合は、「li.red」と「li.blue」は異なるul要素の子なので、それぞれ「1～3番目」でも問題ない。
HTML
- 赤 (font-size : 16px)
- 赤 (font-size : 20px)
- 赤 (font-size : 24px)
- 青 (font-size : 28px)
- 青 (font-size : 32px)
- 青 (font-size : 36px)
CSS
.red:nth-child(1) {
font-size: 16px;
}
.red:nth-child(2) {
font-size: 20px;
}
.red:nth-child(3) {
font-size: 24px;
}
/* li.redとli.blueは異なるul要素の子なので「1～3番目」でOK*/
.blue:nth-child(1) {
font-size: 28px;
}
.blue:nth-child(2) {
font-size: 32px;
}
.blue:nth-child(3) {
font-size: 36px;
}