こんにちは！ワタナベです！
最近コロナの影響でライブハウスなどが閉店してしまったというニュースが多くとても悲しいです。
特に大好きな洋服のブランド店が閉店してしまったのが一番ショックでした( ;∀;)
今回はコーディングでよく使う疑似クラス「nth-child」について。
便利で良く使うのですがややこしかったり数字に弱かったりしてなかなか覚えられないので備忘録ということでよく使う使い方を紹介していきます。
※よく混同される「nth-of-type」については今回は触れません。
基本編
X番目を指定
- リスト１
- リスト２
- リスト３
ul li:nth-child(2){
color:red;
}
この疑似クラスの基本的な使い方です。
親要素に対してX番目の子要素を指定できます。
一番最初を指定
- リスト１
- リスト２
- リスト３
ul li:nth-child(1){
color:red;
}
もしくは「:first-child」でも可。
子要素の一番最初の要素を指定します。
どちらでも好きな方で良いと思います。
一番最後を指定
- リスト１
- リスト２
- リスト３
ul li:last-child{
color:red;
}
nth-childではないですが、子要素の一番最後の要素を指定します。
後から要素を追加したり、要素を減らしたりしても一番最後を指定してくれます。
X番目以降を指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
ul li:nth-child(n+3){
color:red;
}
指定した要素含め、それ以降の要素すべてが指定されます。
X番目以前を指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
ul li:nth-child(-n+3){
color:red;
}
指定した要素含め、それ以前の要素すべてが指定されます。
Xの倍数を指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
- リスト６
- リスト７
- リスト８
- リスト９
ul li:nth-child(3n){
color:red;
}
Xの倍数を指定できます。個人的に3nはちょいちょい使います。
2nだと2の倍数なので後述する偶数指定にもなります。
偶数を指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
ul li:nth-child(even){
color:red;
}
もしくは前述した「2n」でも偶数を指定できます。
記述は「2n」のが短いのでスピード重視なら2nですかね。
奇数を指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
ul li:nth-child(odd){
color:red;
}
もしくは「2n+1」でも奇数を指定できます。
自分は今まで偶数奇数はローマ字の方で使ってましたが、正直あまり覚えられていないので、数字で覚えてしまった方が良い気がしてきました(笑)
X番目以外すべてを指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
ul li:not(:last-child){
color:red;
}
個人的によく使うのは「:not(:last-child)」ですね。
応用編
X番目～Y番目を指定
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
ul li:nth-child(n+2):nth-child(-n+4){
color:red;
}
数学じみてきて「ウワ～ッ」ってなってきましたが、どんどん疑似クラスを追加して指定する要素を絞ることが可能です。
多分使いこなせたら便利です。
おまけ
要素内で子要素が唯一の場合、その子要素を指定
- リスト１
ul li:only-child{
color:red;
}
恥ずかしながらこの記事を書くのに色々調べた時に初めて知りました。
子要素が1個のとき、その子要素を指定する疑似クラスだそうです。
どこかで役に立ちそうなので覚えておこう…！
ちなみに最初に「nth-of-type」について触れないと言いましたが、違いを知らずに使っていると痛い目をみるので、わからない方は下の記事が図有りでとても分かりやすいと思うので一読するのがオススメです！↓↓↓
と、疑似クラス「nth-child」の使い方について書きましたが、それでもわからない、もっと便利に使いたいという方にはこちらがオススメ↓↓↓
scssのmixinでnth-childの様々な使い方がまとめられており、用途に応じてスムーズに利用できるようになっています。
scssって便利だなあ…(‘ω’)
それではまた次回。
ご閲覧ありがとうございました(*´ω｀)
