【css】:nth-child、:nth-of-typeについて

css

cssの:nth-child、:nth-of-typeについてまとめています。

サマリ

  • :nth-childは親要素の中の子要素の中で、何番目かを判定してcssを適用する
  • つまり、子要素は指定していない別のhtmlタグもカウント対象となる
  • 逆に、:nth-of-typeは親要素の中の子要素の中で、指定のhtml要素で何番目かを判定する
  • 子要素は指定していない別のhtmlタグはカウント対象外となる
  • notは()内に該当しない要素にcssを適用する
div {
  & span {
    color: olive;

    // div要素の子要素の3番目spanにcolorを適用
    &:nth-child(3) {
      color: red;
    }

    // div要素の3番目のspanにcolorを適用
    &:nth-of-type(3) {
      color: red;
    }
    
    &:not(.cls) {
      color: purple;
    }
  }
}