• 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. テキスト文字を中央、左右にcssで寄せよう

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

  4. CSSで画像を背景に貼ってみよう

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

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

2021年6月
 123456
78910111213
14151617181920
21222324252627
282930  
Translate »