update: 6763view
【css】n番目まで、n番目以降など要素にスタイル設定したいとき
ulタグやolタグ、dlタグの子要素としてliやdt、ddなどを記述して表しますが、何番目のliだけに色を変えたい、何番目以降は幅を変えたい、といったスタイルを変えたいことがよくあります。
そんな時は、いちいちliなどにクラスを指定しなくても、cssの疑似クラスでスタイルを指定することができます。
余計なクラス指定をしなくていいので、htmlソースがシンプル！になります。
かなりの頻度で使用する割に、あれ？？なんだっけ！？となってしまうので備忘録も兼ねて書いてますｗ
書き方
要素:nth-child(値){
プロパティ名:値;
}
基本の書き方です。
上からn番目
:nth-child(n)例えば、上から4番目の指定をしたい場合は、:nth-child(4)となります。
下からn番目
:nth-child(n)例えば、上から4番目の指定をしたい場合は、:nth-child(4)となります。
n番目まで
:nth-child(-n+X)例えば、上から4番目までの指定をしたい場合は、:nth-child(-n+4)となります。
n番目以降
:nth-child(n+X)例えば、上から4番以降の指定をしたい場合は、:nth-child(n+4)となります。
n番ずつ(倍数)
:nth-child(Xn)例えば、4番ずつ指定をしたい場合は、:nth-child(4n)となります。
奇数番目
:nth-child(odd)例えば、奇数だけ指定をしたい場合は、:nth-child(odd)をつけます。
偶数番目
:nth-child(even)例えば、偶数だけ指定をしたい場合は、:nth-child(even)をつけます。
最初だけ
:first-child例えば、最初だけ指定をしたい場合は、:first-childをつけます。
最後だけ
:last-child例えば、最後だけ指定をしたい場合は、:last-childをつけます。
