セレクションチャレンジ

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

チャレンジ

簡単

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

すべての <p> 要素をターゲットにするタイプセレクターを使用して、CSSルールを記述してください。テキストの色を "blue" に、フォントサイズを 16 pixels に設定します。
<h2> 要素と <div> 要素に、値 "highlight" を持つ class 属性を追加してください。
クラス "highlight" を持つすべての要素をターゲットにするクラスセレクターを使用して、CSSルールを記述してください。背景色を "yellow" に設定します。
<ul> 要素に、値 "special" を持つ id 属性を追加してください。
ID "special" を持つ要素をターゲットにするIDセレクターを使用して、CSSルールを記述してください。背景色を "lightgray" に、フォントサイズを 20 pixels に設定します。
すべての <h1> 要素と <li> 要素をターゲットにするグループセレクターを使用して、CSSルールを記述してください。テキストの色を "red" に設定します。

自分で試してみよう

<html>
<head>
    <title>Selection Challenge</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>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>