ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

【WEB制作の基本】nth-childとnth-of-typeでよく使う倍数や範囲の逆引き集

便利な疑似要素nth-child、nth-of-typeでよく使う倍数や範囲指定などの逆引き集です。

nth-childとnth-of-typeの違い

  • nth-childは、全てのセレクタを数えます
    pを指定しても、h1やh3なども数えられます。
  • nth-of-typeは、指定したセレクタのみを数えます
    pを指定すれば、h1やh3は数えられません。

最初からの順番

最初から数えて適用させる方法です。

倍数

3つごと、5つごと、などの倍数で適用できます。

p:nth-child(3n) {background:blue}
p:nth-of-type(3n) {background:blue}

「n」は倍数になるため、3・6・9・・となります。

○番目以降

たとえば、7番目から適用させる場合。

p:nth-child(n+7) {background:blue}
p:nth-of-type(n+7) {background:blue}

○番目まで

たとえば、3番目まで適用させる場合。

p:nth-child(-n+3) {background:blue}
p:nth-of-type(-n+3) {background:blue}

○番目~○番目まで

例えば3番目~5番目まで適用する場合。

p:nth-child(n+3):nth-child(-n+5) {background:blue}
p:nth-of-type(n+3):nth-child(-n+5) {background:blue}

偶数

偶数は「even」または「2n(2の倍数)」で適用できます。

p:nth-child(even) {background:blue}
p:nth-of-type(even) {background:blue}
p:nth-child(2n) {background:blue}
p:nth-of-type(2n) {background:blue}

奇数

奇数は「odd」または「2n-1(2の倍数-1)」で適用できます。

p:nth-child(odd) {background:blue}
p:nth-of-type(odd) {background:blue}
p:nth-child(2n-1) {background:blue}
p:nth-of-type(2n-1) {background:blue}

○番と倍数のミックス

例えば1番目と4の倍数ごとの場合

p:nth-child(4n+1) {background:blue}
p:nth-of-type(4n+1) {background:blue}

最後からの順番

最後から数えて適用する方法もあります。
最後から3つのboxはマージンを無くす場合などに活用されます。

最後から○番目まで

例えば最後から3番目までを適用させる場合

p:nth-last-child(-n+3){background:blue}
p:last-of-type(-n+3){background:blue}

条件によって適用させる

要素の条件によって適用させることができます。

○個以上ある場合、全てに適用

例えば要素が3つ以上ある場合、全てに適用させます。

p:nth-last-child(n+3),
p:nth-last-child(n+3) ~ p {background:blue}

p:last-of-type(n+3),

p:last-of-type(n+3) ~ p {background:blue}

○個以下の場合、全てに適用

例えば要素が3つ以下の場合、全てに適用させます。

p:first-child(n+3):nth-last-child,
p:first-child(n+3):nth-last-child ~ p {background:blue}

p:first-of-type(n+3):last-of-type,
p:first-of-type(n+3):last-of-type ~ p {background:blue}

 

:hasとnth-childの組み合わせ

擬似クラスの:hasとnth-childを組み合わせることで「◯個以上ある場合」と同様の事が可能です。
サンプルでは親要素のdiv内のボックス数で、divの表示・非表示を分岐させています。

//div内のボックスが1つだけの場合は非表示
div:has(>:nth-child(1) {
  display:none;
}
//div内のボックスが1つ以上の場合は表示
div:has(>:nth-child(2) {
  display:block;
}

swiperのthumbsが1つの場合は非表示にしたい時などに利用できますね。

いざ使う時に忘れてしまうことがあるので、逆引き集として使っていただけると幸いです。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ