WEBデザイナーズNEXT

Webデザイナー

CSSで○番目の時にスタイルを適用させたい場合

カテゴリー:CSS
Pocket

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

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

スポンサードリンク

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

一番下のボーダーを赤色に変更してみました。
最後の要素に適用

html


css


 

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

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

最初の要素に適用

html


css


 

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

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

html


css


 

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

後ろから2番目の高さを変えてみました。
後ろから○番目の要素に適用

html


css


 

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

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

html


css


 

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

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

html


css


 

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

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

html


css


 

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

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

こんな記事もどうですか?
CSSコピペ専用!角丸を簡単に使用するメモ

スポンサードリンク

Pocket

カテゴリー:CSS
WEBデザイナーズNEXT TOP