はじめに

htmlのリストで特定の番号の要素だけcssを変えることってできますか？

リストに限らず、この中の要素の何番目の要素というのをcssで指定することが可能ですよ。

本当ですか！ちょっと文字の色とかをそこだけ変えないといけなくて、困っていたんです。php側で出力されているのでそこを変更するもどうかなって思っていたので・・・

なるほど・・では、サンプルを使ってご紹介していきたいと思います。

リストの要素の番号に応じてcssを変えてみよう

今回は、サンプルとして、リストを仕様します。
リストの１番目、２番目、３番目、４番目などを指定してcssを変えていきたいと思います。
使用するhtmlは次のような構造のものを使用します。

<ul class="nth_type_sample">
<li>文字の色が赤い</li>
<li>文字の色が青い</li>
<li>文字の大きさが他のものより大きい</li>
<li>文字の大きさが他のものより小さい</li>
</ul>

上記のようなhtmlに書かれているように各要素に書かれているcssを当ててみます。
この際 nth-type-of(要素の番号）を使用します。
書き方としては、次のようになります。

.nth_type_sample li:nth-of-type(1){
 color:red;
}
.nth_type_sample li:nth-of-type(2){
 color:blue;
}
.nth_type_sample li:nth-of-type(3){
 font-size:20px;
}
.nth_type_sample li:nth-of-type(4){
 font-size:12px;;
}

上記のようにcssを書くことで何番目というものを指定することができます。
上記のコードのサンプル実装例は次のようになります。

• 文字の色が赤い
• 文字の色が青い
• 文字の大きさが他のものより大きい
• 文字の大きさが他のものより小さい

文字として書かれているcssが当たっていることがわかるのではないでしょうか？
何かのお力に慣れれば幸いです。