CSSの隣接セレクタを使って記述する量を減らそう!

2014/10/15

adjacent_css

こんにちは。
今回は「CSSの隣接セレクタを使って記述する量を減らそう!」です。

今までCSSの隣接セレクタを使ってなかったのですが、けっこうみんな使っているみたいで、そんなに便利なら使ってみようと思う今日この頃です。

 

隣接セレクタとは

セレクタを + で区切ると、同じ階層にある要素同士で、 ある要素の直後に隣接している要素を対象にスタイルを適用することができます。

 

liにborder-topをつけて、一番最後のliにはborder-topなしにしたい時ってけっこうあると思います。
普通に書くと下記のようになります。

 

隣接セレクタを使うと下記のよう書く事ができます。

 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

 

いかがでしたか。上記は一例ですが、これを応用するといろんな所で使えると思います。
以上で「CSSの隣接セレクタを使って記述する量を減らそう!」でした。

参考サイト:隣接セレクタ-スタイルシートリファレンス

topへ戻る