Context as Selector
文脈セレクタについてのページです。
文脈セレクタはセレクタとインライン要素のタグと組み合わせて、その条件化の時のみ有効にするものです。
例えば、ブロック要素<P>タグ内のインライン要素<B>や<I>タグの範囲のみ有効するセレクタです。
ブロック要素内のインライン要素に指定
<P>や<H>タグなどブロック要素内の、<B>や<I>タグなどインライン要素の部分のみ異なったスタイルを指定できます。
サンプルは、<P>の<B>部分は赤、<I>は青にする場合です。 この場合、<H1>など他のブロック要素内の<B>と<I>部分は、反映されません。
class name tag { property : values ; property : values ; ・・・; }
<style style="tex/css">
<!--
p { font-size: 24pt; font-family: Arial, Helvetica; }
p b { color: red; }
p i { color: blue; }
-->
</style>
<p>Font Weight Normal.
<br><b>Font Weight Bold.</b><br>
<i>Font Style Italic.</i></p>
特定クラスセレクタの部分に指定
特定のクラスセレクタ部分のインライン要素を、異なったスタイルで指定できます。
サンプルは、<P>タグは、16ptのArialの黒で<B>タグの範囲は青で表示しますが、同じ<B>タグの範囲でも<P>タグのheadクラスセレクタ内は、
赤で表示します。
<style style="tex/css">
<!--
p { font-size: 24pt; font-family:
Arial, Helvetica; }
p b { color: blue; }
p.head { font-size: 24pt; font-family: Arial, Helvetica; }
p.head b { color: red; }
-->
</style>
<p>Font Weight Normal. <b>Font Weight Bold.</b></p>
<p class="head">Font Weight Normal. <b>Font Weight Bold.</b></p>
 |
 |
|---|
