【CSS】nth疑似要素を使った個別CSS変更

2024年4月4日2024年4月27日

URLをコピーしました！

何番目の要素だけ。最後の要素だけ。等個別に条件でCSS変更したい場合に

nth-child とnth-of-type の2種類の方法がありますが、前者のnth-child ではdiv、pなど要素の種類が違う場合でも計算されてしまう為、実際にはあまり実用的でなく筆者は使っておりません。当記事ではnth-of-type をメインに紹介します。

目次（クリックでジャンプ）

【CSS】nth疑似要素を使った個別CSS変更

<div class="list">
   <div class="list__item">アイテム</div>
   <div class="list__item">アイテム</div>
   <div class="list__item">アイテム</div>
</div>

〇番目の要素だけCSSを変更する

3つ並ぶ.list__item の中で2番目の要素だけ背景色を追加したい場合は以下のような記述方法です。

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

.list {
   &__item {
      &:nth-of-type(2){
         background: #2F62AE;
      }
   }
}

最初or最後の要素だけ変更する

.list {
   &__item {
      &:first-of-type {
         background: #2F62AE;
      }
      &:last-of-type {
         background: #2F62AE;
      }
   }
}

奇数or偶数の数だけ要素変更する

交互に色を変えたい、レイアウトを変えたい等の場合におすすめ

.list {
   &__item {
      &:nth-of-type(even) {
         background: #2F62AE;
      }
      &:nth-of-type(odd) {
         background: #2F62AE;
      }
   }
}