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

●子孫セレクタについて

 子孫セレクタは特定の要素の中に含まれる要素に対してスタイルを適用させたい場合に使います。要素名またはセレクタを先頭に記載し、半角スペースで区切って適用させたい要素を追加配置します。サイドバーなどCSSで複数の段組みを作ったときに段組みごとにそれぞれ異なるスタイルを適用させたい場合などに重宝されるでしょう。なお、ブラウザ別によるバグはありません。

【CSS】

div#sidebar p {
 CSSの書式を記載
}

【HTML(XHTML)】

<div id="sidebar"><p>サイドバーの段組み内のp要素に指定</p></div>

【解説】

 この指定方法だと、sidebarのID名が付いたdiv要素の中にあるp要素だけにスタイルが適用されます。言い方を変えますと、sidebarのID名が付いたdiv要素内のp要素以外のp要素には適用されません。ただし、指定した要素の子要素(孫要素含む)にスタイルが継承されるか継承されないかは普通のプロパティの値の継承と同じです。子孫セレクタの中にプロパティの値が子要素に継承されない場合はやはり子孫セレクタの形でも子要素に継承されません。一般的には「親要素名+半角スペース+子要素名」のように記載しますが、複数並べて最後の入れ子だけに適用させることもできます。

div p img {
 border-style: none;
}

 この方法ではdiv要素内のp要素内のimg要素だけに枠線非表示のスタイルが反映されます。また、以下のようにカンマ( , )で区切ることにより、セレクタを複数指定できるのは一般のセレクタの場合のときと同じです。

【CSS】

h1, h2, div#sidebar p {
 CSSの書式
}

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

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