クラス・セレクタ（class selector）
アセンブラの魔女 ⧫ CSS ⧫ セレクタ ⧫ セレクタの種類 ⧫ クラス・セレクタ

　特定のクラスに属する要素をスタイル適用の対象として指定するには、属性セレクタ（E[class=class_name）を使う方法が基本となりますが、HTMLでCSSを使う場合は .class_nameのような簡略書式で表記することができます。

.class_name

　次の例では、testクラスの要素のバックグラウンドを赤に設定します。

body	{black;}
class 	.test	{}
.test	{background:red;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSSのセレクタの使用例</title>
<meta name="description" content="CSSのセレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="class_selector_sample.css" type="text/css">
</head>
<body>
<div>div</div>
<div class="test">div</div>
</body>
</html>

　クラス・セレクタは型セレクタと組み合わせて使用するのが一般的です。

E.class_name

　次の例は上記のCSSにdiv要素の条件を追加し、div要素のtestクラスにのみスタイルを適用します。

body     {black;}
class    .test	{}
div.test {background:red;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSSのセレクタの使用例</title>
<meta name="description" content="CSSのセレクタの使用例です" />
<meta http-equiv="Content-Style-type" content="text/css">
<link rel="stylesheet" href="class_selector_sample2.css" type="text/css">
</head>
<body>
<span class="test">span</span>
<div class="test">div</div>
</body>
</html>
▼ Property