CSSを学んでいるなかで、セレクタの使い方がようやく理解できました。初心者が理解しやすいように整理します。
なお、理解しやすさを目的として書き、網羅的ではありませんので、ご承知おきください。
セレクタとは
CSSとはHTMLの表示方法を指定するものです。文字色、背景色、文字サイズなどを指定します。
そのときに、どの範囲のHTMLの表示方法を指定しているのかを示す必要があります。その範囲を示すものがセレクタです。
セレクタの種類
セレクタにはたくさんの種類がありますが、代表的なものだけ説明します。
タイプセレクタ
h1要素やh2要素など、「要素」をそのまま使って指定するセレクタです。
「要素」には、見出しのほかに、汎用ブロックレベル要素や段落があります。
ユニバーサルセレクタ
「要素」の代わりに「*」を指定すると、すべての要素に適用されます。これをユニバーサルセレクタを呼んでいます。
「*」の直後にほかのセレクタが続く場合に限り、「*」を省略して書くことができます。
クラスセレクタ
HTMLで「CLASS=”xxxxxx”」の形式で、要素にクラス属性の値を指定することができます。要素に名前をつける感じになります。
例
HTML
<div class="sample">・・・</div> <p class="sample">・・・</P> <h1 class="sample">・・・</h1>
CSSでは、「要素名」「.」「クラス属性の値」の形式か、「*」「.」「クラス属性の値」の形式か、「*」を省略した「.」「クラス属性の値」の形式で、適用対象を指定します。
CSS
div.sample {・・・}
p.sample {・・・}
h1.sample {・・・}
*.sample {・・・} ← class="sample"を指定した任意の要素に適用
.sample {・・・} ← 「*」を省略した書き方
ＩＤセレクタ
HTMLで「id=”xxxxxx”」の形式で、要素にid属性の値を指定することができます。要素に固有の名前をつけることになります。
クラス属性は同じものを文書中にいくつでも書けますが、同じid属性は文書中にひとつしか書けません。
例
HTML
<div id="sample">・・・</div> <p id="sample">・・・</P> <h1 id="sample">・・・</h1>
CSSでは、「要素名」「#」「クラス属性の値」の形式か、「*」「#」「クラス属性の値」の形式か、「*」を省略した「#」「クラス属性の値」の形式で、適用対象を指定します。
CSS
div#sample {・・・}
p#sample {・・・}
h1#sample {・・・}
*#sample {・・・} ← id="sample"を指定した任意の要素に適用
#sample {・・・} ← 「*」を省略した書き方
セレクタ記述上の重要なルール
半角スペースで区切って並べる
セレクタを半角スペースで区切って並べると、「左側の適用対象」の中に含まれる「右側の適用対象」に表示指定が適用されます。
この方法で、いくつでも半角スペースで区切ってセレクタを並べることにより、適用範囲を絞り込むことができます。
たとえば「body.sample h1」と書くと、「class=”sample”」が指定されているbody要素に含まれるh1要素だけに適用されます。
カンマで区切って並べる
セレクタをカンマ（,）で区切って並べることにより、適用先を複数指定できます。
p要素は入れ子にできない
記事全体をクラスセレクタで名前をつけたいとき、次のようにしました。
<div class="entry"> <?php the_content(); ?> </div>
次のようにしては、うまくいきません。
<p class="entry"> <?php the_content(); ?> </p>
これは、記事の中にp要素が含まれるからだと思います。p要素は段落なんだから、入れ子にできるわけがないと突っ込まれそうですが、知らなきゃわからないことです。
まとめ
HTMLとCSSについて、要素の表示形式別に説明した本やサイトはたくさんありますが、ここに書いたようなことをきちんと説明してあるものはあまりありませんでした。
次の本は、そのあたりのことも含めて、わりとていねいに書かれています。HTMLやCSSを実際に修正しながら学ぶ人にはおすすめです。
