コーディング

【備忘録】疑似クラス「nth-child」の使い方まとめ

  • このエントリーをはてなブックマークに追加

こんにちは!ワタナベです!

最近コロナの影響でライブハウスなどが閉店してしまったというニュースが多くとても悲しいです。
特に大好きな洋服のブランド店が閉店してしまったのが一番ショックでした( ;∀;)

 

今回はコーディングでよく使う疑似クラス「nth-child」について。

便利で良く使うのですがややこしかったり数字に弱かったりしてなかなか覚えられないので備忘録ということでよく使う使い方を紹介していきます。

※よく混同される「nth-of-type」については今回は触れません。

基本編

X番目を指定

  • リスト1
  • リスト2
  • リスト3

ul li:nth-child(2){
color:red;
}

この疑似クラスの基本的な使い方です。
親要素に対してX番目の子要素を指定できます。

一番最初を指定

  • リスト1
  • リスト2
  • リスト3

ul li:nth-child(1){
color:red;
}

もしくは「:first-child」でも可。
子要素の一番最初の要素を指定します。
どちらでも好きな方で良いと思います。

一番最後を指定

  • リスト1
  • リスト2
  • リスト3

ul li:last-child{
color:red;
}

nth-childではないですが、子要素の一番最後の要素を指定します。
後から要素を追加したり、要素を減らしたりしても一番最後を指定してくれます。

X番目以降を指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

ul li:nth-child(n+3){
color:red;
}

指定した要素含め、それ以降の要素すべてが指定されます。

X番目以前を指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

ul li:nth-child(-n+3){
color:red;
}

指定した要素含め、それ以前の要素すべてが指定されます。

Xの倍数を指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6
  • リスト7
  • リスト8
  • リスト9

ul li:nth-child(3n){
color:red;
}

Xの倍数を指定できます。個人的に3nはちょいちょい使います。
2nだと2の倍数なので後述する偶数指定にもなります。

偶数を指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

ul li:nth-child(even){
color:red;
}

もしくは前述した「2n」でも偶数を指定できます。
記述は「2n」のが短いのでスピード重視なら2nですかね。

奇数を指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

ul li:nth-child(odd){
color:red;
}

もしくは「2n+1」でも奇数を指定できます。

自分は今まで偶数奇数はローマ字の方で使ってましたが、正直あまり覚えられていないので、数字で覚えてしまった方が良い気がしてきました(笑)

X番目以外すべてを指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

ul li:not(:last-child){
color:red;
}

個人的によく使うのは「:not(:last-child)」ですね。

応用編

X番目~Y番目を指定

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

ul li:nth-child(n+2):nth-child(-n+4){
color:red;
}

数学じみてきて「ウワ~ッ」ってなってきましたが、どんどん疑似クラスを追加して指定する要素を絞ることが可能です。
多分使いこなせたら便利です。

おまけ

要素内で子要素が唯一の場合、その子要素を指定

  • リスト1

ul li:only-child{
color:red;
}

恥ずかしながらこの記事を書くのに色々調べた時に初めて知りました。
子要素が1個のとき、その子要素を指定する疑似クラスだそうです。
どこかで役に立ちそうなので覚えておこう…!

 

ちなみに最初に「nth-of-type」について触れないと言いましたが、違いを知らずに使っていると痛い目をみるので、わからない方は下の記事が図有りでとても分かりやすいと思うので一読するのがオススメです!↓↓↓

 

と、疑似クラス「nth-child」の使い方について書きましたが、それでもわからない、もっと便利に使いたいという方にはこちらがオススメ↓↓↓

scssのmixinでnth-childの様々な使い方がまとめられており、用途に応じてスムーズに利用できるようになっています。
scssって便利だなあ…(‘ω’)

 

それではまた次回。

ご閲覧ありがとうございました(*´ω`)

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ