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

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

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

対応ブラウザ

Chrome Yes
IE 7.0+
Firefox Yes
Safari Yes
Opera Yes

使用方法

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

HTML

<div class="title">Title Class</div>
<div class="description">Description 1</div>
<div class="description">Description 2</div>

CSS

.title + .decription{
	color:red;
}

Demo

<div class="title">Title Class</div>
<div class="description">Description 1</div>
<div class="description">Description 2</div>

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

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

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

隣接セレクタの優先順位

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

HTML

<div class="rinsetsu">
	<div class="title">Title Class</div>
	<div class="description">Description</div>
</div>

CSS

.rinsetsu .description{
	color:blue;	
}
.title + .decription{
	color:red;
}

やってみると、、、

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

この優先順位を理解していないと「あれ、指定したのにCSS効かない」みたいなことになります。

まとめ

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

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

では。