CSS の基本 CSS セレクター_基本チュートリアル

例:

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

2. タイプ セレクター
構文:

E { sRules }

説明:
タイプ セレクター。ドキュメント言語オブジェクト (Element) タイプをセレクターとして使用します。
例:

td { font-size:14px; width:120px; }

a { text-decoration:none; }

3. 属性セレクター 構文:

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }

説明:
属性セレクター。
attr 属性を使用して E を選択します。
値が value に等しい attr 属性を使用して E を選択します。
値がスペースで区切られた単語のリストであり、そのうちの 1 つが value に等しい attr 属性を使用して E を選択します。ここの値にはスペースを含めることはできません
attr 属性を持つ E を選択し、属性値は値で始まるハイフンで区切られた単語のリストです
例:

h[title] { color : blue; }

/* title 属性を持つすべての h オブジェクト */



span[class=demo] { color: red; }



div[speed="fast"][dorun="no"] { color: red; }



a[rel~="copyright"] { color :black; }

4. セレクターが含まれます
構文:

E1 E2 { sRules }


説明:
セレクターが含まれます。 E1 に含まれるすべての E2 を選択します。つまり、E1.contains(E2)==true です。
例:

table td { font-size:14px; }



div.sub a { font-size:14px; }

5. サブオブジェクト セレクター
構文:

E1 > E2 { sRules }

説明:
サブオブジェクト セレクター。 E1 の子であるすべての E2 を選択します。
例:

body > p { font-size:14px; }

/* body の子オブジェクトであるすべての p オブジェクトのフォント サイズは 14px です */



div ul>lip { font-size:14px; }

6.ID セレクター
構文:

#ID { sRules }


説明:
ID セレクター。ドキュメント ツリー (DOM) 内のオブジェクトの一意の識別子として ID をセレクターとして使用します。
例:

#note { font-size:14px; width:120px;}

7. クラス セレクター
構文:

E.className { sRules }

説明:
クラスセレクター。このセレクターは HTML で使用できます。その効果は E [ class ~= className ] と同等です。 「属性セレクター」を参照してください。
IE5 では、スペースで区切られたスタイル シート クラス名のセットを指定することにより、オブジェクトのクラス属性 (プロパティ) に複数の値 ( className ) を指定できます。例: