特定の子要素にスタイルを適用
同じスタイルを使っている複数の要素のうち、一つにだけ変化をつけたい場合、classをつけて区別することもできますが、CSS3の擬似クラス「child」を使うと、CSSのみで変化をつけることが可能です。
「first-child」を使う
以下のリスト要素のうち、最初のものだけ赤い文字にするとします。
index.html
<ul> <li>この文字は赤にしたい</li> <li>この文字は黒のまま</li> <li>この文字は黒のまま</li> <li>この文字は黒のまま</li> </ul>
そんな場合、first-childを使って以下のようにスタイルを適用します。
style.css
ul li:first-child{
color:rgb(100%,0,0);
}
| ○ △:first-child{ } | ○の中で一番初めの△要素に対してスタイルを適用 |
|---|
「nth-child(n)」を使う
以下のリスト要素のうち、3番目のものだけ赤い文字にするとします。
index.html
<ul> <li>この文字は黒のまま</li> <li>この文字は黒のまま</li> <li>この文字は赤にしたい</li> <li>この文字は黒のまま</li> </ul>
そんな場合、nth-child(n)を使って以下のようにスタイルを適用します。
style.css
ul li:nth-child(3){
color:rgb(100%,0,0);
}
| ○ △:nth-child(□){ } | ○の中で□個目の△要素に対してスタイルを適用 |
|---|