セレクタ
CSSの構文
セレクタ {
プロパティ: 値;
｝
HTMLタグなど要素のどこへ装飾するか選定する役割りを持ちます。
基本的なセレクタ
全称セレクタ
* {プロパティ:値;}
すべての要素を対象に、装飾します。単独で使うだけではなく、コードを見やすくするため（可読性の向上）にも利用します。
要素型セレクタ
タグ名 {プロパティ:値;}
HTMLタグを対象に、装飾します。
HTML
<h2>要素型セレクタ</h2>
<p>要素型セレクタは、タグセレクタあるいは要素セレクタとも呼ばれます。</p>
CSS
h2 {
color: #80f; /*もともとのh2の設定も適応されます*/
}
p {
color: #080;
}
表示
要素型セレクタ
要素型セレクタは、タグセレクタあるいは要素セレクタとも呼ばれます。
IDセレクタ
#ID名 {プロパティ:値;}
ID名のついたタグを対象に、装飾します。
クラスセレクタ
.クラス名 {プロパティ:値;}
クラス名のついたタグを対象に、装飾します。
HTML
<div class="box">
<p>紺色の枠で囲みます。</p>
</div>
CSS
.box {
padding: 0.5em;
margin: 0.5em;
border: 1px solid #05d;
}
表示
紺色の枠で囲みます。
セレクタリスト
セレクタ, セレクタ, … {プロパティ:値;}
「,」で複数のセレクタをつなぎ、同じ装飾を施します。
コンビネータ
セレクタリストの様に、複数のセレクタに効果的かつ効率よく装飾するために、セレクタ同士を合理的につなぐコンビネータ（結合子）が用意されています。
詳解は
属性セレクタ
IDセレクタやクラスセレクタは、要素の属性に基づいて装飾を施すセレクタです。
疑似クラスセレクタ
要素の状態に基づいて装飾を施すセレクタです。
要素にマウスが上にのった（オンマウス）ときの 詳解は :hover
疑似要素セレクタ
疑似要素に装飾を施すセレクタです。
詳解は