CSS

nth-childの基本知識と実用的な使い方

2017.09.06

子供達

nth-childは子要素にスタイルを当てれる便利な擬似クラスです。3番目とか3番目からとか2番目から3飛ばしとか、細かな指定が可能です。WordPress等のCMSの一覧ページで大活躍しそうですね。

nth-childの指定方法

まず、nth-childの基本的な指定方法です。奇数や偶数の指定もこれでできます。

x番目を指定する nth-child(x)
x番目以降を指定する nth-child(n+x)
最初からx番目までを指定する nth-child(-n+x)
x番目の指定をy番飛ばしで指定する nth-child(yn+x)
最後からx番目を指定する nth-last-child(x)

上の表ではxは該当要素をの順番を指定し、yはxの繰り返し条件を指定しています。

nth-childのよくある使用例

nth-childのよくある使用例を紹介します。

3番目の要素を指定

3番目の要素を指定します。

3番目の要素

.child:nth-child(3){
  スタイル
}

1番目の要素に指定し繰り返しの単位は4

1番目に指定したスタイルを4つ飛ばしで繰り返します。

1番目の要素、繰り返し4

.child:nth-child(4n+1){
  スタイル
}

奇数の指定

1番目に指定したスタイルを2つ飛ばしで繰り返します。奇数の指定です。括弧内をoddで指定することもできます。

奇数の指定

.child:nth-child(2n+1){
  スタイル
}

偶数の指定

2番目に指定したスタイルを2つ飛ばしで繰り返します。偶数の指定です。括弧内をevenで指定することもできます。+2は省略できます。

偶数の指定

.child:nth-child(2n+2){
  スタイル
}

実用的なnth-childの使い方

nth-childは組み合わせて使用することも可能です。CMSの一覧レイアウトを想定した実践的な指定を紹介します。

実用的な例

オブジェクトのサイズは割愛しますが上図のようなレイアウトの場合のnth-child使用例です。

//親要素
.parent{
  display:flex;
  flex-wrap:wrap;
}
.child:nth-child(3n+2){
  margin-left:40px;
  margin-right:40px;
}
.child:nth-child(n+4){
  margin-top:40px;
}

解説

この例では3n+2で左右の余白、n+4で2行目以降、上部に余白を取っています。オブジェクトの下に余白を取ってしまうとエリアの余白に干渉する場合がありCMSで利用する場合は汎用性が損なわれてしまうからです。

列のオブジェクト数が可変する場合はブレイクポイントで対処するしかないのですが、固定されている場合はnth-childでさばけます。

まとめ

WordPressの案件が多数を占める今は、私の中ではnth-childは必要不可欠な擬似クラスに昇格しています!対応ブラウザ問題であまりちゃんと覚えてなかったのですが、今はCMSに活用しまくっています。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する