初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL3. スタイル設定の書式　その1★外部ファイルを作成する

３．「子孫セレクタ」 〜書式に関する補足〜

前章では子孫セレクタの基本的な書き方を説明しましたが、HTML上の要素の配列を利用してセレクタを設定する方法は他にもあります。ただし、前章で紹介した書き方以外はIE6.0やNN4.7以前など、主要なブラウザが対応していないので、現在ではまだ実際的な指定方法ではありません。知識程度に覚えておかれると良いでしょう。

�@)親要素 > 子要素

例えば、<div>で括られた間に<p>と<blockquote>がどちらも子要素としてあり、更に<blockquote>の子要素にも<p>がある場合、<div>から見ると<p>は子要素、孫要素の二通りに使われているということになります。この時もしdiv p { 設定 }という形で子孫セレクタを用いると、この設定は<div>で括られた間にある<p>全て、つまり子要素<p>にも孫要素<p>にも反映されるわけですが、このような時に<blockquote>で引用されている内容に影響を与えず、それ以外の段落に何らかの設定を加えたい場合、div > p { 設定 }と書けば、<div>の子要素となっている<p>にのみ指定が反映されるので、<blockquote>の介在によって孫要素となっている<p>には影響しないで済みます。

「>」は、設定を加えようとする要素が親要素の直下で子要素として存在している部分のみ表示に反映せよという指示なわけですね。

★div > p { 〜設定〜 } とした場合★

�A)前要素 + 後要素

今度は、HTML上で要素が記述されている順序に着目して、セレクタを決める方法です。同一の親要素を持って並立している子要素がいくつもある時、ある子要素のすぐ後に記述されている子要素にのみ設定を反映させたい時に使います。

例えば、<h1>で括られた見出しの後に<p>で括られた段落が並び、次に<h2>で括られた小見出しがあって、それに続く<p>にのみスタイルを指定したいとします。そうすると h2 + p { 設定 } と書けば、<h2>より前にある段落や、その後<h3>など何らかの子要素が出てきた後に来る段落には影響しません。

★h2 + p { 〜設定〜 } とした場合★

�B)要素[属性]

ある要素に含まれる属性を利用してセレクタを決める方法です。例えば<a>タグ内にある href という属性に限り表示に反映するよう設定を組みたいならば a[href] { 設定 } と書きます。

また、特定の値を持つ属性にのみスタイルを設定することも出来、その場合は a[href="値"] { 設定 } と書きます。例えば、

a[href="workshop.htm"] { background-color: #fff } のように書けば、「workshop.htm」というファイル名へのリンクのみ、背景色を付けて表示されます。

初級篇2.VOL3.スタイル設定の書式・その1-3 <<

>> 初級篇2.VOL3.スタイル設定の書式・その1-4