最近CSSで○番目に適用させる…という書き方をする事が増えてきました。いつも書き方を忘れてしまうので、自分で使いやすいようにまとめてみました。

最初に指定、最後に指定、○番目に指定、後ろから○番目に指定などなど…やれることは多いので、
覚えていない方は是非参考にしてみてくださいね。

最後の要素にスタイルを適用させる

一番下のボーダーを赤色に変更してみました。

html

css

 

最初の要素にスタイルを適用させる

一番上のボーダーを消してみました。上のボーダーだけデザインを変えたいというのが意外とあるんですよね。

html

css

 

前から○番目の要素にスタイルを適用させる

今までテーブルタグでやっていましたが、リストタグにも当然適用させる事ができます。
今回は2番目の背景を青に変えてみました。

html

css

 

後ろから○番目の要素にスタイルを適用させる

後ろから2番目の高さを変えてみました。

html

css

 

偶数の要素にスタイルを適用させる

偶数の左にパディングを加えてみました。

html

css

 

奇数の要素にスタイルを適用させる

奇数の左にマージンを加えてみました。

html

css

 

親要素の指定を変更する事によってできる事

親要素を変更して、大まかに変更させる事もできます。親要素「ul_big」に対して奇数の要素の背景を変えてみました。

html

css

 

CSSで○番目の時に指定したい場合に使う要素 まとめ

テーブルで背景をシマシマにしたり、最初のボーダーだけ色を変えたり、色々なデザインを求められます。
1つずつクラスを振るなんてもう古い！CSSでやれる事が増えている分、できるだけ簡潔にCSSを書けるようにしておきたいです。