知らないあなたは損しているかも?CSS 意外と知らない隣接セレクタの使い方

CSSを使用していてなにか隣り合った要素を指定したいなって思ったことないですか?例えばtitleというクラスの次に.descriptionと続いた場合のみ、descriptionに特定のプロパティを指定したいなど。

そういうときに活躍するのが隣接セレクタです。

対応ブラウザ

Chrome Yes
IE 7.0+
Firefox Yes
Safari Yes
Opera Yes

使用方法

では上記で例えたtitleというクラスを持った要素と、descriptionというクラスを持った要素を例に説明します。

HTML

CSS

Demo

Title Class
Description 1
Description 2

上記のような構造のHTMLとCSSがあった場合どうなるかというと、2つ目のdescriptionクラスを持ったdivには上記のCSSは適応されません

.title + .description というセレクタはtitleクラスの隣のdescriptionクラスを指定しています。2つ目のdescriptionに隣接セレクタを使用してCSSを適用させるには、.description + .descriptionというセレクタを使用します。

上記の説明で隣接セレクタの使用方法はご理解いただけたと思いますが、優先順位の方はどうなるか実験したいと思います。

隣接セレクタの優先順位

例として下記のHTML・CSSを使用します。

HTML

CSS

Demo

Title Class
Description

結果はご覧の通り、隣接セレクタの方が優先順位が高い結果になりました。つまりクラス in クラスより隣接セレクタの方が優先されるということになります。

この優先順位を理解していないと「あれ、指定したのにCSS効かない」みたいなことになります。CSSの優先順位についてもっと知りたい方は下記の記事を御覧ください。

まとめ

頻繁に使用することはあまりないかもしれない隣接セレクタですが、これを上手に活用することによってCSSの記述を減らすことができます。その結果、メンテナンスがしやすいCSSにつながると思うのでぜひ使用してみてください。

ただ、使い所は考えないと逆にCSSの記述を多くしてしまう可能性がありますのでご注意ください。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。