クラスセレクター

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 12/76。

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

CSSで特定のクラスを持つ要素をターゲットにするには、ピリオド（.）に続けてクラス名を使用します。クラスセレクターを使用するための基本的な構文は次のとおりです。

.classname {
    property: value;
}

例えば：

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

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

チャレンジ

簡単

見出し（<h1>、<h2>）、段落（<p>）、およびディビジョン（<div>）を含む、さまざまな要素を持つHTMLドキュメントが与えられています。これらの要素の一部には class 属性があります。あなたのタスクは、クラスセレクターを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください：

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

チートシート

クラスセレクターは、class属性の値に基づいてHTML要素をターゲットにします。ピリオド（.）の後にクラス名を続けて使用します：

.classname {
    property: value;
}

例：

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

これは、class="highlight"を持つすべての要素をターゲットにし、指定されたスタイルを適用します。

自分で試してみよう

<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>