2017年6月7日

指定した要素にだけCSSを適用するための疑似クラス「nth-child(n)」その他

偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス「nth-child(n)」の使い方をまとめてみました。

HTMLの例

  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

上からn番目

上から2番目のみに適用。

li:nth-child(2){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

奇数

奇数要素のみに適用。

li:nth-child(odd){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

偶数

偶数要素のみに適用。

li:nth-child(even){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

nの倍数

nの倍数にのみ適用。以下だと3、6、9、12…と3の倍数に適用できる。

li:nth-child(3n){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目

以下の書き方だと3の倍数に1を足した、1、4、7、10、13…に適用できる。

li:nth-child(3n+1){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目
  • 6番目

上からn個

上から指定した個数だけ適用。この例だと上から3個に適用されます。

li:nth-child(-n+3){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

上からn個目以降

上から指定した個数以降にのみ適用。この例だと上から3個目以降に適用されます。

li:nth-child(n+3){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

ここからは「nth-child()」以外の書き方。

最初の要素のみ

最初の要素にのみ適用。

li:first-child{
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

最後の要素のみ

最後の要素にのみ適用。

li:last-child{
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

下からn番目

下からn番目の要素にのみ適用。

li:nth-last-child(3){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

下からn個

下から指定した個数だけ適用。この例だと下から3個に適用されます。

li:nth-last-child(-n+3){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

下からn個目以降

下から指定した個数以降にのみ適用。この例だと下から3個目以降に適用されます。

li:nth-last-child(n+3){
color: #f00;
}
  • 1番目
  • 2番目
  • 3番目
  • 4番目
  • 5番目

以上、指定した要素にだけCSSを適用するための疑似クラスのご紹介でした。

,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です