クラスセレクター

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 12/76。

クラスセレクターは、class属性の値に基づいてHTML要素を選択するために使用されます。ドキュメント内の複数の要素に同じスタイルを適用できます。クラスセレクターは、タグ名に関係なく、要素のグループを同じ方法でスタイル設定したい場合に特に便利です。

CSSで特定のクラスを持つ要素を対象にするには、ピリオド（.）の後にクラス名を指定します。クラスセレクターを使う基本的な構文は次のとおりです。

.classname {
    property: value;
}

たとえば：

.highlight {
    background-color: yellow;
    color: black;
}

この例では、クラスセレクター .highlight は、クラス「highlight」を持つすべての要素を対象にします。宣言によって、これらの要素の背景色は黄色に、テキストの色は黒に設定されます。

チャレンジ

簡単

見出し（<h1>、<h2>）、段落（<p>）、および区分（<div>）など、さまざまな要素を含むHTML文書が与えられています。これらの要素にはまだclassがありません。まずclass属性を追加し、その後、クラスセレクターで要素をスタイル設定します。以下の手順に従ってください。

<h1>要素と最初の<p>要素に、値が "blue-text" のclass属性を追加します。
<h2>要素と2番目の<p>要素に、値が "large-text" のclass属性を追加します。
クラスセレクターを使用して、クラス "blue-text" を持つすべての要素を対象とするCSSルールを記述します。これらの要素のテキストの色を青に設定します。
クラスセレクターを使用して、クラス "large-text" を持つすべての要素を対象とするCSSルールを記述します。これらの要素のフォントサイズを24ピクセルに設定します。

自分で試してみよう

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>