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; } } }