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

●子供セレクタについて

 「セレクタ > 子セレクタ」とすると特定の要素の子要素に対してスタイルを適用させることができます。

【CSS】

div.kodomo > h3 {
 height: 20px;
}

※">"の両サイドに半角スペースを入れないでじかに付けても問題はありません。→「div.kodomo>h3」

【HTML/XHTML】

<div class="kodomo">
 <h3>子供セレクタ</h3>
</div>

【解説】

 この指定はkodomoのクラス名が付いたdiv要素内のh3の要素に対して20pxの高さを指定しています。一般的には「セレクタ + > + 子セレクタ」というように記載します。ただし、子供セレクタに対応しているのはNetscape6以降、Mozilla、Firefox、Opera6以降、およびMac版IE5とSafariのブラウザです。ウィンドウズ版IE7(v7.0)が子供セレクタに対応していますがウィンドウズ版IE(v6.0以下)はこの子供セレクタに対応していません。

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

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