あるタグの要素の中に使うタグ だけに 特別な装飾を指定する場合、
文脈セレクタの表現を使いました。
対して、
あるタグの要素の直後に使うタグ だけに 特別に装飾する場合、隣接セレクタ
を使います。
通常に使う h6 タグの要素の上下マージンを1文字分にするが、 h5 の直後にある h6 だけ、 上マージンをマイナス1.2文字分にする例を下記に示します。 この場合のhead内で書くスタイルを、次のように書きます。
<style type="text/css">
h5,h6 { margin-top: 1em; margin-bottom: 1em;}
h5+h6 { margin-top: -1.2em;}
</style>
上記のh5+h6の部分が隣接セレクタです。 これで、 h5 の直後に隣接している h6 の飾りを指定しています。 これを使ったbody内の例を 下に示します。
<h5>主題１</h5> <h6>見出しのタイトル１</h6> <h6>見出しのタイトル２</h6> <h6>見出しのタイトル３</h6> <h5>主題２</h5> <h6>見出しのタイトル１</h6> <h6>見出しのタイトル２</h6>
上記の部分は、次のように見えます。(隣接セレクタに対応していないブラウザでは行間が同じです。)
h5+h6で示したように隣接セレクタは、セレクタを+で区切る書き方です。
参考に、文脈セレクタを使わない例も次に示します。隣接セレクタはInternet Explorer 7まで対応していませんでした。
対応していないブラウザではこのように見えます。
なお上記は、直後に隣接する一つの要素を対象にする場合ですが、 直後に隣接する連続した複数の要素に対して使う場合は「+」の代わりに「~」を使います。
以下の問題で練習してみましょう。