クラスセレクタ - wicky @ ウィキ

クラスセレクタ

　前述の属性セレクタ（[タイプセレクタ?参照>[タイプセレクタ]]）で「h1[class="square"]」のように設定する以外に、クラスセレクタを設定することによって、class属性に設定されている値にマッチするセレクタを簡単に設定することができる。要素名とclass属性の値を、ピリオド「.」でつないで記述する。

　これによって、次のように、同じ要素でも異なる表示を行うことが可能。

●クラスセレクタの設定例

h1.square1 {
            border-style : solid;
            border-color : #8b0000;
            padding-top : 5pt;
}

h1.square2 {
            border-style : solid;
            border-color : #8b0000;
            background-color : #8b0000;
            color : white;
            padding-top : 5px;
}

●class属性の設定例

<h1 class="square1">楽しい妖怪<h1/>
<h2 class="square1">怖い妖怪<h2/>

---

　次のように、同じclass属性を持つ全ての要素を指定することも可能。

●全ての要素を対象にしたクラスセレクタ

.square { color : #8b0000 }

　※アスタリスクを利用して、次のように記述することも可能。
　　*.square { color : #8b0000 }