「CSS/記述」の版間の差分

さらにセレクタ
(セレクタについて執筆開始)
(さらにセレクタ)
<code>/*</code> と <code>*/</code>ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。
 
=== セレクタ ===
ここでは、どんなセレクタがあるかを紹介していきます。指定方法を工夫することで、特定の部分にだけ特定のスタイルを適用できます。
 
==== タイプセレクタ ====
セレクタとして要素名を書くと、文書に登場するその要素全てにスタイルを適用します。先ほどの<code>p { color:red }</code>でも、<code>p</code>がこのタイプセレクタで、文書中の<code>p</code>要素すべてに適用されます。
 
==== 全称セレクタ ====
セレクタとして<code>*</code>を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには[[CSS/継承|継承]]というシステムがあるので、属性によっては<code>body</code>に適用するだけでいい場合もあります。
 
==== クラスセレクタ ====
このセレクタは<code>.クラス名</code>という形になっています。これは、ある'''クラス'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>class="クラス名"</code>と、<code>class</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>class</code>属性を付けてください。
 
 
<p style="color:blue">クラスのテスト</p>
 :
途中略
 :
<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
 
のような表示になります。
 
=== IDセレクタ ===
このセレクタは<code>#ID</code>という形になっています。これは、ある'''ID'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>id="ID"</code>と、<code>id</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>id</code>属性を付けてください。
 
さっきのクラスセレクタと重複するように見えますが、最大の違いは'''同じ文書で重複するIDを付けてはいけない'''ということです。そういうわけで、ふつうは<code>#ID</code>で足りますが、<code>要素名#ID</code>としても問題はありません(別の要素がそのIDを持つ場合、スタイルは適用されません)。
 
=== 子孫セレクタ ===
XMLやHTMLでは、<code>&lt;a&gt;&lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;&lt;/a&gt;</code>のように要素が入れ子になっていますが、これを親子関係になぞらえて、「<code>a</code>は<code>b</code>の親要素」とか、「cはaの孫要素」というようにいいます。CSSのセレクタにもこの親子関係を使えます。
 
「<code>セレクタ1 セレクタ2</code>」というように、2つのセレクタを空白で区切って書くと、「<code>セレクタ1</code>の子孫に当たる<code>セレクタ2</code>」という意味になります。<code>セレクタ1</code>や<code>セレクタ2</code>にはタイプセレクタに限らず、どんなセレクタを使ってもかまいません。「<code>id="main"</code>の<code>div</code>要素の中にある、<code>class="hoge"</code>の要素」という場合、「<code>div#main .hoge</code>」というように指定できます。また、「<code>セレクタ1 セレクタ2 セレクタ3</code>」のように、多段階で指定することも可能です。
 
さらに、「<code>セレクタ1 &gt; セレクタ2</code>」のように、2つのセレクタの間に<code>&gt;</code>を入れると、「<code>セレクタ1</code>の直接の子要素である<code>セレクタ2</code>」という意味になって、孫要素以下には一致しなくなります。
 
例えば、
 
<source lang="html4strict">
<head>
途中略
<style type="text/css">
<!--
.example1 span { color:blue }
#id2 > em { color:red }
-->
</style>
</head>
<body>
<p class="example1">ここは装飾なし。<span>ここは子要素。</span><em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
 :
途中略
 :
<p id="id2">ここは装飾なし。<em>子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
</body>
<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
</source>
 
と入力すると、
 
<p class="example1">ここは装飾なし。<span style="color:blue">ここは子要素。</span><em>子供は別の要素だけど、<span style="color:blue">孫要素には適用される。</span></em></p>
 :
途中略
 :
<p id="id2">ここは装飾なし。<em style="color:red">子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
 
のような表示になります。
11

回編集