セレクタ
今回はセレクタについて解説します。セレクタというのは前回出てきました。
<style>
body {
/* 背景色は黒 */
background-color: #000000;
}
</style>
ここで、そのスタイル（この場合背景色が黒）を適用する範囲を示すのがセレクタであり、今回の場合はbodyです。
ところで、3行目に/* 背景色は黒 */と書いてあるこれはコメントです。/* ～ */ で囲んだ部分はコメントとして無視されます。HTMLの<!-- ～ -->と同じようなものだと考えましょう。
さて、セレクタというのは、この例でいくとbodyですね。この意味は「body要素」ですから、セレクタが「適用範囲」を表すことを考えると、「適用範囲はbody要素」となります。
ただ注意したいのが、あまり大した違いではないのですが、「適用範囲がbody要素」と書くと「body要素の中身にスタイルが適用される」というような意味にとられそうですがちょっと違います。確かに結果としては「body要素の中身」の背景が黒くなっているのですが、この「background-color」が適用されるのはあくまで「body要素そのもの」であり、「中身」ではないということは頭の片隅においておきましょう。
複雑なセレクタ
さて、実は、セレクタというのはただ要素名を書くだけではなく、より細かい指定が可能です。
ここでは、そんな中でも基本的なセレクタをいくつか紹介します。
ちなみに、「body」のように要素名をそのまま書いてその要素を示すものはタイプセレクタといいます。
クラスセレクタ
最初に紹介するのはクラスセレクタです。ここで大事なのがクラスです。
実はHTMLにおいては、要素を分類するのにクラスを使います。つまり要素ひとつひとつにクラスを設定して、同じクラスが設定された要素は同じクラスに属するものであるとすることができるのです。
具体的な方法は、グローバル属性の一種であるclass属性を使います。例えばこういう具合です。
<div class="warning">
内容
</div>
この例において、このdiv要素はwarningというクラスに属したことを意味します。クラス名は、大抵は英数字で作られることが多いですが、日本語とか、どんな名前でも構いません。
また、スペースで区切ることによって複数のクラスに属させることも可能です。すなわちこのようにします。
<div class="warning important">
内容
</div>
この場合は、このdivはwarningとimportantという2つのクラスに同時に属していることになります。
さて、クラスに属させる利点というのはもちろん、あるクラスの要素に対してスタイルを指定できることです。
いよいよその具体的な方法を説明します。それはつまりこうです。
.waring {
/* warningクラスに属する要素は背景を黄色にする */
background-color: yellow;
}
セレクタの部分は.warningとなっています。このように.（ピリオド）の後にクラス名を書いたセレクタをクラスセレクタといいます。
もちろん意味は、「warningクラスに属する要素」ということになります。さらに、次のような形もあります。
div.waring {
/* warningクラスに属するdiv要素は背景を黄色にする */
background-color: yellow;
}
さっきの形に加えて、ピリオドの前に要素名である「div」が追加されました。このようにすることで、「クラスがwarningであるdiv要素」というように要素を同時に指定することができます。これはもちろん、言い換えると、ただの.warningなら、div要素にかぎらずp要素とかh1要素とか、任意の要素がwarningクラスに属してさえいれば対象になります。
これは、さっきのタイプセレクタの後ろにクラスセレクタがくっついた形であると見ることもできますね。
逆に、上の要素名がない形が、クラスセレクタから要素名が省略された形であると考えてもよいです。
さらに次のようなことも可能です。
div.waring.important {
/* warningクラスとimportantクラスに属するdiv要素は背景を黄色にする */
background-color: yellow;
}
これはさっきの形と比べると、さらにクラスセレクタの.importantが追加されています。意味としてはコメントに書いてある通り、「warningクラスとimportantクラスに属するdiv要素」です。
このようにクラスセレクタは連結することが可能です。わかりやすい考え方としては、「クラスセレクタは後ろからセレクタを修飾することができる」と考えるのがよいでしょう。
まずタイプセレクタ「div」により対象要素を「div要素全体」に絞り込みます。さらに後ろに.warningをつなげることにより、さらにdiv要素全体の中から「warningクラスに属しているもの」のみに絞り込みます。次の.importantクラスセレクタによりそこからさらに「importantクラスに属しているもの」のみに絞り込まれるので、結果として上記のような指定が完成するのです。
要素名がなくていきなりクラスセレクタが現れるような形（最初の.warningなど）に関しては、次のような考え方もあります。
*.waring {
/* warningクラスに属する要素は背景を黄色にする */
background-color: yellow;
}
最初に謎の要素名のような*が出現しました。これはタイプセレクタと似ていますが、全称セレクタといいます。
全称セレクタの意味は、「全ての要素」です。つまり任意の要素ですね。
* {
color:red;
}
と書いたとすれば、まさにすべての要素に対して指定が適用されるわけです（もっとも、ページ全体の文字色の場合はbody要素だけに指定しておけば十分な場合がほとんどでしょう）。
つまり、.warningのようにいきなり最初にクラスセレクタが現れる形は、*.warning（任意の要素に対してクラスの絞込みを行う）から全称セレクタ*を省略した形とみなすことも可能です。
子孫セレクタ
ほかにもよく使うセレクタを紹介します。それは子孫セレクタです。これは、具体的には次のような形です。
div p {
color:red;
}
この「div pの部分が子孫セレクタです。このようにセレクタをスペースで区切って二つ並べたときこれを子孫セレクタといい、A Bという場合「Aの子孫であるB」を表します。
子孫であるということは、子であるとか、あるいはそのまた子、さらにその子…のように、要するに「中にある」「含まれる」状態を指します。
この例の場合、「divの子孫であるp」でありますから、次の具体例を見てみましょう。
<body>
<div>
<p>divの中のp</p>
<p>divの中のp</p>
</div>
<p>divの外のp</p>
</body>
上2つのpはdivの中ですからスタイルが適用され、文字色が赤となります。それに対し、下のpはdivの中ではありませんから子孫セレクタの条件に当てはまらず、赤くなりません。
ここで「セレクタを2つ並べる」といいましたが、今回の場合2つ並んでいるのはタイプセレクタですが、もちろん他のセレクタでも構いません。
div.warning .important {
color: blue;
}
この場合、「div.warningの子孫の.important」ですから、warningクラスに属するdiv要素の中にある、importantクラスに属する任意の要素ということになります。
これはとてもよく使いますから、覚えておきましょう。
子セレクタ
子孫セレクタと少しにているのが、子セレクタです。子孫セレクタは子や孫、そのまた子…など中にある要素全てが対象になっていたのに対して、子セレクタとなると直近の子だけです。書き方はこうです。
section > p {
color:green;
}
子セレクタは、A > Bのように2つのセレクタを>で結んだ形になります。これで「Aの子であるB」を表します。
<body>
<p>段落1</p>
<section>
<p>段落2</p>
<p>段落3</p>
<div>
<p>段落4</p>
</div>
</section>
</body>
このようなHTMLがあった場合、上のセレクタが適用されるのは段落2と段落3です。子孫セレクタとは違い、section要素の直接の子ではない段落4には適用されません。
子セレクタも子孫セレクタと同様、前後に様々なセレクタを並べることができます。例えば.warning > pなどです。
また、子孫セレクタや子セレクタは、当然ながら複数つなげることもできます。例えば、section div p > spanというセレクタがあったとき、これは「sectionの中（子孫）にdivがあって、その中（子孫）にpがあって、その直接の子にspanがある」という意味でそのspanが対象になるわけです。
これは、例えば子セレクタC > Dがあったときに、これはCというセレクタとDというセレクタが並んでいるわけですから、Cに子孫セレクタA Bを当てはめるとA B > Dという複合形が完成しますね。
さて、今回、一部の基本的なセレクタを紹介しました。これらがあれば、わりと大枠のデザインは可能になります。
しかし、デザインに使うプロパティは、実はまだcolorとbackground-colorしか紹介していません。これではろくなデザインができませんので、次回以降、プロパティの知識を増やして行きましょう。より高度なセレクタもそのうち紹介します。