セレクタの記述方法
セレクタの記述によるスタイルの定義
CSS でスタイルを定義するには、いくつかの記述方法がある。
セレクタに HTMLとクラス名を記述した場合には、その HTML タグとクラス名を合わせて指定した時にスタイルが適用される。
セレクタに HTML タグだけを記述した場合には、そのHTML タグすべてに共通のスタイルが適用される。
セレクタにクラス名だけを記述した場合には、HTML タグの種類に関わらず、クラス名を設定したすべての HTML タグでスタイルが適用される。
特に、クラス名だけを記述する方法は実際の Web ページ制作でもよく使われる方法である。
セレクタの記述(HTML＋クラス名)
p.example {
}セレクタにHTMLタグとクラス両方を記述すると、そのタグでクラスを指定した時にスタイルが適用される。
セレクタの記述(HTMLタグのみ)
p {
}セレクタにHTMLタグだけを記述すると、そのタグ全てに共通のスタイルが適用される。
セレクタの記述(クラス名のみ)
.example {
}セレクタにHTMLタグを設定せずにクラス名だけを記述すると、いずれのタグであってもクラス名を指定した時に スタイルが適用される。
セレクタの記述(ユニバーサルセレクタ)
セレクタに、アスタリスク「*」のみを記述することで、CSS ファイル内のセレクタ全体に設定を反映させることが出来る。
CSS ファイルの最初に設定することで、この後に記述するセレクタ全体に反映される。
これを、ユニバーサルセレクタという。
各タグの要素に最初から設定されている、マージン(外側の余白)とパディング(内側の余白)を 0 に設定する場合によく使われる。
* {
margin: 0px;
padding: 0px;
}セレクタの記述(半角スペースで区切る)
セレクタを半角スペースで区切って記述すると、 あるHTMLタグの下の階層にあるHTMLタグ（子孫要素）にスタイルが適用される。
pタグの下の階層にあるstrongタグ にスタイルが適用されることになる。
1つめの例では、 p タグの下の階層に strong タグがあるのでスタイルが適用される。
2つめの例では、p タグと strong タグの間に別のタグがあるが、p タグの下の階層にあることに変わりはないので、問題なく適用される。3つめの例には p タグがないため、適用されない。
p strong {
}スタイルが適用される
<p>
<strong></strong>
</p><p>
<a><strong></strong></a>
</p>スタイルが適用されない
<li>
<strong></strong>
</li>