隣接セレクタの指定順序

CSSの隣接セレクタは、要素と要素が隣り合う場合に直後の弟要素にスタイルが適用されます。
セレクタの指定順序は兄要素 + 弟要素であり、弟要素 + 兄要素の順で指定してもスタイルは適用されません。

このようなHTMLがあるとしましょう。

<table>
  <tr>
    <th>
      <label class="form-item">項目名</label>
      <span class="form-item-note">[ 必須 ]</span>
    </th>
    <td> ... </td>
  </tr>
</table>

次のCSSは、兄要素 + 弟要素の指定順序になっているで、スタイルは弟要素に適用されます。

• ( Demo ) 隣接セレクタの指定順序 | jsfiddle

/* 兄要素 + 弟要素の順。スタイルは弟要素に適用される */
.form-item + .form-item-note {
  color: red;
}

しかし、次のCSSは弟要素 + 兄要素の指定順序になっているで、スタイルは適用されません。

• ( Demo ) 隣接セレクタの指定順序 #1 is the latest revision | jsfiddle

/* 弟要素 + 兄要素の順。スタイルは適用されない */
.form-item-note + .form-item {
  color: red;
}

このようなセレクタを使う機会があまりなかったので、これまでは隣接セレクタの指定順序を知りませんでした。
しかし、このセレクタを使うことで「検索ボックスで、入力エリアにユーザーがフォーカスした時、入力エリアの枠線の色を変えると同時に検索ボタンの背景色も同じ色に変える」というようなことが出来るようにます。

CSSでは、過剰にセレクタを使うと自分や他の人からは読み取りにくいコードになったり、HTMLの変更に弱かったりしますが、特定の場面では有効に使うことができそうです。