• 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. 画像をhoverして時にズームさせるcssを書こう

  2. cssで矢印を作ろう

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

  4. CSS講座 – 文字の色を変えてみよう –

  5. cssでマウスをおいた時に動かそう

  6. CSSでテキスト文にインデントをつけてみよう

2021年9月
 12345
6789101112
13141516171819
20212223242526
27282930  
Translate »