LoginSignup
1

More than 5 years have passed since last update.

:nth-child()

Last updated at Posted at 2018-12-04

:nth-child()とは?

・疑似クラスである
・指定した要素が親からみて何番目にあるかを意識してつけてあげる

()の中身

コード 内容
odd 奇数に指定
even 偶数に指定
(?n) ?n倍に指定
(?n+1) ?n倍+1に指定
n n番目に指定
n+3 n+3番目以降に指定
-n+3 nを0として3番目より前に指定

コード

css
.side tr:nth-child(odd){
background-color: #d1c0a5;
}

上記はクラス名「side」の中にいる「tr」の奇数行に対して色を「#d1c0a5」に変更するという指示

:??-child

コード 内容
:last-child 指定した要素の中にいる最後の要素に指定
:first-child 指定した要素の中にいる最初の要素に指定
:only-child 一つだけ

コード

css
.side tr:first-child{
background-color: #d1c0a5;
}

上記はクラス名「side」の中にいる「tr」の一番初めの要素に対して色を「#d1c0a5」に変更するという指示

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1