• css

特定の番号の要素のcssだけ変更してみよう

はじめに

htmlのリストで特定の番号の要素だけcssを変えることってできますか?
リストに限らず、この中の要素の何番目の要素というのをcssで指定することが可能ですよ。
本当ですか!ちょっと文字の色とかをそこだけ変えないといけなくて、困っていたんです。php側で出力されているのでそこを変更するもどうかなって思っていたので・・・
なるほど・・では、サンプルを使ってご紹介していきたいと思います。

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

今回は、サンプルとして、リストを仕様します。
リストの1番目、2番目、3番目、4番目などを指定して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が当たっていることがわかるのではないでしょうか?
何かのお力に慣れれば幸いです。

関連記事

  1. CSSで文字の間隔を変更してみた

  2. hoverした時に文字の間隔をつかってアニメーションしてみよう

  3. CSSで見出しを飾りつけよう

  4. 見出しの前に三角形をつけてみよう

  5. cssで矢印を作ろう

  6. リストの前の丸をcssで消してみよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930