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 ) を指定できます。例:

。
例:

div.note { font-size:14px; }

/* クラス属性値が「note」と等しい（を含む）すべての div オブジェクトのフォント サイズis 14px */



.dream { font-size:14px; }

/* class 属性値が次と等しい（を含む）すべてのオブジェクトのフォント サイズ「note」は 14px */

8. セレクターのグループ化
構文:

E1 、 E2 、 E3 { sRules }

説明:
セレクターのグループ化。同じ定義を複数のセレクターに適用するには、セレクターをカンマ区切りのグループに結合します。
例:

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px; }


9. 疑似クラスと疑似オブジェクトのセレクター

構文:

E: 疑似クラス { sRules }

E: 疑似要素 { sRules }
説明:
疑似クラスおよび疑似オブジェクトのセレクター。
疑似クラスセレクター。疑似クラス[:link :hover :active :visited :focus :first-child :first :left :right :lang]を参照してください。
擬似オブジェクトセレクター。 「疑似要素[:first-letter:first-line:before:after]」を参照してください。
例:

div:first-letter { font-size:14px; }

a.fly :hover { font-size:14px; color:red; }