セレクタは、CSSスタイルがHTML要素に割り当てられる方法を決定します。適切な定義がある場合、最初にセレクタがアクセスする要素の名前を指定します。その後、波かっこ内に宣言されます。宣言内で1つ以上のプロパティを指定できます。したがって、一般的な構文は次のようになります：
セレクタ {
プロパティ1: 値;
プロパティ2: 値;
プロパティ3: 値;
}前のチュートリアルで既にこのような定義に出会いました。
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
必ず、各宣言をセミコロンで終了するように注意してください。
利用可能なセレクタを見てみましょう
CSSには多くのセレクタが用意されており、それらの中でも重要なものを紹介します。なぜなら、セレクタを扱えるようにならない限り、CSSプロパティを適切に定義することはできないからです。
HTML文書内でスタイルを割り当てる最も簡単な方法は、要素セレクタです。
次の構文は、すべての p 要素に黒色を割り当てます。
p {
color: #009966;
}
複数の要素に同じスタイルを割り当てたい場合も可能です。
In this case, simply list the relevant elements one after the other, separated by commas.
p, h1, li {
color: #000;
}
要素に複数のスタイルを割り当てることもできます。各スタイルはセミコロンで区切って記述します。
p {
color: #000;
background-color: red;
}
上記のバリエーションを組み合わせることも可能です。
p, h1, li {
color: #009966;
background-color: red;
}
結果は次のようになります：
複数の要素から成るエリア
しばしば、複数のHTML要素から成る領域をフォーマットする必要があります。そのような場合、HTMLには span と div の2つの特別な要素があります。これらの要素は、このシリーズでもしばしば登場します。
例:
<div class="artikel"> <h1>Farbexplosion</h1> <p class="thema">Ein Tutorial zur Erstellung von Farbexplosion von <span class="autor">MarkusMelzer</span>.</p> </div>
div と span の唯一の違いは、div 要素がテキストフローで新しい行を生成することです。一方、span は新しい行を生成しません。示された例では、div領域が定義され、その中に見出しと段落が含まれています。その段落の中には span の領域が含まれます。
IDセレクタとクラスセレクタ
これまでは要素セレクタを使用していました。次の例では、このようなセレクタによってすべての h1 タグがフォーマットされます。
h1 {
color: #000;
background-color: red;
}
しかし、必ずしもこの形式が常に適しているわけではありません。たとえば、すべての h1 タグに特定のプロパティを割り当てたい場合でも、すべてに割り当てるのではなく一部のみに割り当てたい場合はどうすればよいでしょうか？そのような場合、CSSにはクラスセレクタとIDセレクタという2つの選択肢があります。
クラスセレクタを使うと、クラス属性を持つHTML要素を非常に特定して選択できます。対象のHTML要素には、属性 class を指定する必要があります。クラス定義はドットから始まります。
例:
.rot {
color: red;
}
ここでは、クラス rot が定義されています。赤色が割り当てられたプロパティをHTML要素に追加するには、クラス名の後に続けて class を記述します。
<p class="rot">PSD-Tutorials.de</p>
IDセレクタも同様に簡単に使用できます。IDセレクタは二重カギで識別されます。
#topnavi {
color: blue;
};この例では、ID topnavi が定義されています。ただし、注意：ドキュメント内でIDは実際には1回だけ割り当てることができます。定義されたIDプロパティへのアクセスは次のようになります:
<div id="topnavi">Hier steht die Navigation</div>
id属性にID名が割り当てられます。ここではハッシュタグは記入しません。
なお、表示された情報は互いに組み合わせることも可能です。例えば、HTML要素に複数のクラスを割り当てることができます。
<p class="rot gross">PSD-Tutorials.de</p>
この例では、テキスト段落にrotとgrossの2つのクラスが割り当てられます。クラスとIDの指定をしたい場合は、以下のようになります：
<p class="rot" id="navi">PSD-Tutorials.de</p>
要素とIDを組み合わせることもできます。以下に例を示します。
div.navi {
color: blue;
}
この構文は、クラスがnaviのdiv要素にのみ適用されます。同様に、naviクラスを持つp要素は影響を受けません。
CSSには、セレクタの組み合わせ方法がもう1つあります。以下の構文に注目してください：
h1 {
color: red;
}
em {
color: blue;
}
1つ目の見出しに赤色が指定されます。em要素は青色になります。
これらの指示を組み合わせることで、h1要素内のem要素のみを青くできます。
h1 em {
color: blue;
}
要素名はコンマで区切って記述します。
これはよくある間違いで、CSS初心者もよく陥ります。ただし、コンマが含まれている同じ構文を以下に示します：
h1, em {
color: blue;
}この構文はどういう意味でしょうか？すべてのh1およびem要素が対象です。これは、コンマがない構文とはまったく異なります！
もう1つ重要なセレクタはユニバーサルセレクタです。これにより、任意の要素を選択できます。アスタリスクを使用してこのセレクタを定義します。
* {
color: red;
}
この構文により、すべての要素が赤くなります。このセレクタでも、いくつかの構文上の特性が考慮される必要があります。
#mainnavi * {
color: red;
}
この例では、IDがmainnaviの要素内のすべての要素の前景色を赤に設定します。ただし、その要素自体には適用されません。
なお、宣言の先頭にユニバーサルセレクタがある場合は、記述する必要がないので注意しましょう。以下のようなものは無駄です：
* p {
color: red;
}
この構文は次の構文と同等です：
p {
color: red;
}
次のチュートリアルでさらに多くのセレクタを学びます。
