【CSS】nth-childのofフィルターについて

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

nth-childのofフィルター「of S」構文についてのあれこれ。

nth-childのofフィルター

nth-childの「of S」構文は以下のように指定します。

    <div class="boxWrap">
      <div class="box">1</div>
      <div class="box color-blue">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box color-blue">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>

.boxWrap {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.box:nth-child(2 of .color-blue){ /* 「of S」構文 */
  background-color: lightblue;
}

.box要素の中の、.color-blue要素の2つ目の要素に対してスタイルを変更できました（以下の部分です）

.box:nth-child(2 of .color-blue){
  background-color: lightblue;
}

一応、nth-childやnth-of-typeとの違いだと、例えば以下のようにnth-child(2)で指定すれば、2つ目の.test要素のスタイルが反映されます。

    <div class="box2">
      <p class="test">pタグ</p>
      <div class="test">divタグ</div>
      <div class="test">divタグ</div>
      <span class="test">spanタグ</span>
      <p class="test">pタグ</p>
      <div class="test">divタグ</div>
      <p class="test">pタグ</p>
      <span class="test">spanタグ</span>
      <p class="test">pタグ</p>
      <div class="test">divタグ</div>
    </div>
.box2 .test:nth-child(2){
  background-color: lightblue;
}

.box2 .test:nth-of-type(2)と指定すれば、以下のように反映されます。

.box2 .test:nth-of-type(2){
  background-color: lightblue;
}

それぞれのタグの種類ごとの2つ目のtest要素に反映される感じです。

ofフィルターを使うとより詳細に要素に指定できるようになります。

    <div class="box2">
      <p class="test">pタグ</p>
      <div class="test">divタグ</div>
      <div class="test picup">divタグ</div>
      <span class="test">spanタグ</span>
      <p class="test">pタグ</p>
      <div class="test">divタグ</div>
      <p class="test picup">pタグ</p>
      <span class="test">spanタグ</span>
      <p class="test">pタグ</p>
      <div class="test">divタグ</div>
    </div>
.box2 :nth-child(2 of .picup){
  background-color: lightblue;
}

ここまで読んでくださりありがとうございました。

CSS HTML

この記事を書いた人

くまだ

記事一覧