• #CSS
• #要素

update:2019.6.5　6164view

【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をつけます。