事象cssプロと言っているのに、まだまだ使ったことがない機能が有ることを思い知った、ユゲタです。
css3の機能を全て問題なく使いこなしているっていう人って、プロの中でもほとんどいないとは思うんですが、
そんな中、セレクタの「+」と「~」を、これまで一度も使用してこなかったんですが、
今回とあるプロジェクトで使ってみて、改めて、
「これから先も使うことないな！」
という思いに行き着いたという話を備忘録しておきます。
cssセレクタの「+」と「~」の使い方
まずはじめに、この機能について説明をする前に、サンプルのHTMLコードを書いておきます。<div class="test">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>
<style>
.test > *{
display:inline-block;
padding:10px;
border:1px solid black;
margin:10px;
}
.test .c{
background-color:orange;
}
</style>
この５つのエレメントが同一階層に有る時に、兄弟エレメントを指定できるのが、この「+」と「~」というセレクタ機能です。
A
B
C
D
E
+セレクタ
.c + *{
background-color:red;
}
+直前のエレメント（基準エレメント）に対して、隣接する同階層にあるエレメント（対象エレメント）が選択されます。
ただし、この時の条件として、基準エレメントよりも後ろに書かれているエレメントというのが条件になります。
A
B
C
D
E
~セレクタ
.c ~ *{
background-color:red;
}
~直前のエレメント（基準エレメント）に対して、同階層にあるエレメント（対象エレメント）が選択されます。
ただし、この時の条件として、基準エレメントよりも後ろに書かれているエレメントというのが条件になります。
A
B
C
D
E
