Perl Web開発者のHTML・CSS入門

兄弟セレクタ - CSS入門【CSS3対応】

兄弟セレクタは、「+」あるいは「~」で、2つのセレクターを接続し、同じ親要素の子で、1つ目の要素の直後にある2つ目の要素を指定します。

「+」の場合は、隣接している後ろの要素を指定し、「~」の場合は、隣接している必要はなく、後ろに現れる要素を指定します。

「+」の場合だけ解説します。

兄弟セレクタ

<style>
  img + p {
    color: red;
  }
</style>

<div>
  <img src="/images/webdesign-logo.png">
  <p>
    兄弟セレクタ
  </p>
</div>

imgの直後の兄弟要素であるpにスタイルシート(CSS)が適用されるていることに注目してください。

兄弟セレクタのサンプル

実際に兄弟セレクタってどんな時に使うの?

実用例では、ブラウザに依存しないオリジナルのチェックボックス、ラジオボタンを作るときに使用します。

リンク先にサンプルがあります。