CSSセレクタ
CSSの書式
CSS の書式は次のようになっています。 セレクタ { プロパティ: 値; }
セレクタの種類
CSSのバージョン（レベル）により多少の違いがありセレクタの種類も多くありますが代表的なものとして以下のものがあります。
全称セレクタ(ユニバーサルセレクタ)
すべての要素に適用される。*（アスタリスク）を使用
* { margin: 0; padding: 0 }
タイプセレクタ
HTMLの要素をそのままセレクタとして使用
h1{font-size:20px;}
文脈セレクタ
文章構造の関連に基づいた指定。隣接セレクタ以降はブラウザによりうまく反映されないこともあるので注意して使用してください。
CSS使用時全般に通じますが対象とするブラウザを始めに限定（ブラウザとバージョン）したほうが安心して作成できます。もちろん限定ブラウザ以外でも同じデザインに見えるに越したことはありませんが。
子孫セレクタ
親要素に含まれる子要素などに適用
p em{color:#ff0000;} /*p要素に含まれるem要素の文字色を赤*/
子供セレクタ 親要素の子供要素に適用
p>em{ color:#ff0000;} /*p要素の子供要素のem要素のみ文字色を赤*/
隣接(兄弟)セレクタ 直後にある同レベルの要素に適用
h1+p{ color:#ff0000;} /*h1要素の直後に来るp要素の色を文字赤*/
属性セレクタ 指定した属性が設定されている要素に適用
p[class]{ color:#ff0000;} /* classが設定されているp要素の色を文字赤*/
属性セレクタ 指定した属性と属性値が一致する要素に適用
p[class="head"]{ color:#ff0000;} /*p要素のclassの値がheadの要素の文字色を赤*/
属性セレクタ 指定した属性の属性値の半角スペース区切の値と一致する要素に適用。
p[class ~="head"]{ color:#ff0000;} /*p要素のclassの値にheadという文字がが半角区切りで含まれている要素の色を赤*/ ~チルダ使用
属性セレクタ 指定した属性の属性値がハイフンで区切られた先頭の値と一致する要素に適用。
p[class|="head"]{ color:#ff0000;} /*p要素のclassの値がheadかhead-で始まる要素にの文字食を赤*/ |バーティカルバー使用
ID（一意）セレクタ
一つの文書中で一回だけしか用いられていないと云う一意性のあるidに適用 #（ハッシュ）を使用
#exp{color;#ff0000;} /*idにexpが設定されてる要素の文字色を赤*/
p#exp{color:#00ff00;} /*p要素のidがexpのp要素の文字色を緑*/
p[id="exp"]{color:##0000ff;} /*p要素のidがexpのp要素の文字色を青*/
上記3つは同じ指定ですが優先度はp#exp>#exp>p[id="exp"]となり文字色はp#exp{color:#00ff00;}の緑となる。
クラスセレクタ
文章中何度も用いることが可能なclassに適用。 .(ピリオド)を使用
.hard{color:#ff0000;}/*class="hard"のようにhardが設定されている要素の文字色を赤*/
