【WEB制作の基本】nth-childとnth-of-typeでよく使う倍数や範囲の逆引き集
便利な疑似要素nth-child、nth-of-typeでよく使う倍数や範囲指定などの逆引き集です。
nth-childとnth-of-typeの違い
- nth-childは、全てのセレクタを数えます
pを指定しても、h1やh3なども数えられます。 - nth-of-typeは、指定したセレクタのみを数えます
ｐを指定すれば、ｈ1や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つの場合は非表示にしたい時などに利用できますね。
いざ使う時に忘れてしまうことがあるので、逆引き集として使っていただけると幸いです。
