[css] セレクタの「+」と「~」

2021/08/18

事象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>

この５つのエレメントが同一階層に有る時に、兄弟エレメントを指定できるのが、この「+」と「~」というセレクタ機能です。

+セレクタ

.c + *{
  background-color:red;
}

+直前のエレメント（基準エレメント）に対して、隣接する同階層にあるエレメント（対象エレメント）が選択されます。ただし、この時の条件として、基準エレメントよりも後ろに書かれているエレメントというのが条件になります。

~セレクタ

.c ~ *{
  background-color:red;
}

~直前のエレメント（基準エレメント）に対して、同階層にあるエレメント（対象エレメント）が選択されます。ただし、この時の条件として、基準エレメントよりも後ろに書かれているエレメントというのが条件になります。

これ以上わかりやすい説明はないだろう、と自分で思うがままに説明してみましたが、わかりましたでしょうか？「+」と「~」の使い方で、「+」は、基準に対して１つしか選択されないのにたいして、「~」は、基準より後ろの全てが対象になりえるという事で、今回は「*」を使いましたが、.dや.eという風に指定することもできます。

このセレクタの使いみち

そして、いちばん重要なのは、「このセレクタをどういう時に使うのが効率的なのか？」という疑問です。ボクが今回プロジェクトで使ったというのは、とあるwebサイトのレスポンシブデザインで、スマホ表示の時に、ハンバーガーボタンを押したら、メニューが表示されるという場合に、 javascriptを使わずにcssだけで、メニュー表示を実現させようと、基準エレメントのhover擬似クラスに対して、メニューを基準エレメントのすぐ後ろに置いて実現させたのですが、正直、HTMLの構造が効率的ではなかったので、今後使える方式ではないと思ってしまいました。そもそも、兄弟エレメントを選択してくれるエレメントは、有り難い存在なんですが、基準エレメントから後ろだけという条件が非常にめんどくさくて、そんな事をするぐらいなら、親エレメントの条件で行うほうがよほど管理しやすいという思考です。

cssに熱望する機能（要望）

これは、毎回考えてしまうんですが、cssは基本的に「親→子」に対しての影響をするセレクタしかないのですが、「子→親」で影響できるセレクタがあれば便利なのにな〜といつも思ってしまいます。またそれができるのであれば、親子構造になっていない箇所でのエレメントの状態を監視して、cssの変更ができるようになったりもするので、コレ本当に、欲しい機能なんですよね。え？js使えば簡単にできるって？そんなことは分かってるんですよ。 cssだけでやるっていう、エンジニア美学での話なんですが、コレやはり他の人はついてこられない思考なんですかね？自分でも、こだわりがすぎるってことは分かってるんですが・・・

[css] セレクタの「+」と「~」