XHTML/CSS・トップ | CSS基礎知識・目次

●隣接セレクタについて

 「セレクタ+セレクタ」の形でスタイルを指定すると両方のセレクタではなく、2つ目のセレクタだけにスタイルが反映されます。(同じ親要素を持っていることが条件ですが)

【CSS】

h1 + h2 {
 margin-top: 2em;
}

※"+"の両サイドに半角スペースを入れなくてもOKです。→「h1+h2」

【HTML(XHTML)】

<h1>第1レベルの見出し</h1>
<h2>第2レベルの見出し</h2>

【解説】

 この指定方法だとh1要素直後のh2要素にスタイルが適用され、h2要素の上マージンとして2emが設けられます。

 隣接セレクタに対応しているのはNetscape6以降、Mozilla、Firefox、Opera6以降、SafariおよびMac版IE5のブラウザです。ウィンドウズ版IE(v6.0以下)は対応していませんが、IE7(v7.0)は隣接セレクタに対応しています。

XHTML/CSS・目次 | 対象とクラス・目次

Copyright (C) 2006-2008 http://www.xml.vc/