セレクタの意味やID名、クラス名が理解できたところで、次は使い方編です。
これらを組み合わせることで、より多彩なレイアウトが出来るようになります。
ちなみに、前ページのID名やクラス名もセレクタの一種です。
※ここにあるのはよく使うものだけですので、もっと詳しく知りたい方は参考サイトをご参照ください。
セレクタの種類-HTMLクイックリファレンス* … 全ての要素"*"アスタリスクは、全ての要素に対して設定することが出来ます。全称セレクタ、ユニバーサルセレクタと呼ばれます。
<div>にも<span>にも<a>にも…ありとあらゆる全てに適用されます。
例）全ての要素の文字色を赤にする
▼CSS
* {
color: red;
}
▼HTML
テキスト１（何にも入れない）
<div>テキスト２</div>
<span>テキスト３</span>
<div>テキスト４<span>テキスト５</span></div>
▼結果
テキスト１〜５すべて適用されます。
テキスト１（何にも入れない）
テキスト２
テキスト３テキスト４テキスト５
例）全てのDIV要素の文字色を赤にする
▼CSS
div {
color: red;
}
▼HTML
テキスト１（何にも入れない）
<div>テキスト２</div>
<span>テキスト３</span>
<div>テキスト４<span>テキスト５</span></div>
▼結果
テキスト２、４、５に適用されます。
※５については、内包する４の設定が引き継がれます。
テキスト１（何にも入れない）
テキスト２
テキスト３テキスト４テキスト５
","カンマで区切ることで、同じ設定を複数の要素に対して適用できます。
例）全てのDIV要素とSPAN要素の文字を赤にする
▼CSS
div, span {
color: red;
}
▼HTML
テキスト１（何にも入れない）
<div>テキスト２</div>
<span>テキスト３</span>
<div>テキスト４<span>テキスト５</span></div>
▼結果
テキスト２〜５に適用されます。
テキスト１（何にも入れない）
テキスト２
テキスト３テキスト４テキスト５
" "半角スペースを入れることで、その要素の中にある特定の要素に対して適用できます。
例）DIV要素の中にあるSPAN要素の文字色を赤にする
▼CSS
div span {
color: red;
}
▼HTML
テキスト１（何にも入れない）
<div>テキスト２</div>
<span>テキスト３</span>
<div><span>テキスト４</span></div>
<div><p><span>テキスト５</span></p></div>
▼結果
テキスト４、５に適用されます。
５については、間にP要素が入っていても、DIV要素内であるのは変わりないので適用されます
テキスト１（何にも入れない）
テキスト２
テキスト３テキスト４
例）typeに"password"の名前を持つ入力欄のみ枠線を赤にする
▼CSS
input[type="password"]{
border: 1px solid red;
}
▼HTML
<form action="" method="post">
*名前
<input type="text" size="10" value="" />
*パスワード
<input type="password" size="10" value="" />
<input type="submit" value="送信ボタン" />
</form>
▼結果
２つ目のパスワード入力欄に適用されます
※サンプルなので送信できません。
次ページはこれらやID名、クラス名を組み合わせて使う応用編です。