#: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」に変更するという指示