IDセレクター

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

IDセレクターは、id属性の値に基づいて特定のHTML要素をターゲットにするために使用されます。複数の要素のスタイリングに使用できるクラスセレクターとは異なり、IDセレクターは一意であり、ページ上の単一の要素にのみ適用できます。これにより、他の要素には適用すべきではない特定のスタイルを使用して、個々の要素をスタイリングするのに役立ちます。

CSSで特定のIDを持つ要素をターゲットにするには、ハッシュ記号（#）の後にID値を続けて使用します。IDセレクターを使用するための基本的な構文は次のとおりです。

#idname {
    property: value;
}

例えば：

#intro {
    color: blue;
    font-size: 20px;
}

この例では、IDセレクター #intro は、IDが "intro" である要素をターゲットにします。宣言により、この要素のテキストの色が青に、フォントサイズが20ピクセルに設定されます。

チャレンジ

簡単

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

<div>要素に、値が"special"であるid属性を追加します。
IDが"special"である要素をターゲットにするIDセレクターを使用して、CSSルールを記述します。この要素の背景色をyellowに、テキストの色をredに設定してください。

チートシート

IDセレクターは、id属性を使用して特定のHTML要素をターゲットにします。IDセレクターは一意であり、ページ上の単一の要素にのみ適用できます。

ハッシュ記号（#）の後にID値を続けて使用します：

#idname {
    property: value;
}

例：

#intro {
    color: blue;
    font-size: 20px;
}

自分で試してみよう

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