1.説明

CSSのIDセレクターは、HTML要素に一意のID属性を付与し、そのID属性を使用してスタイルを適用するためのセレクターです。以下に例を示します。

HTML要素にID属性を付与する例：

<div id="my-element">This is my element.</div>

CSSでIDセレクターを使用して、そのID属性に対してスタイルを適用する例：

#my-element {
  color: yellow;
  text-decoration: underline;
}

上記の例では、#my-elementセレクターは、ID属性がmy-elementであるHTML要素に対してスタイルを適用します。この場合、テキストの色が黄色になり、フォントサイズにunderlineが追加されます。

IDセレクターは、ページ内の要素に対して一意のスタイルを適用する場合に使用されます。ただし、IDセレクターは他のセレクターよりも優先順位が高く、同じ要素に対して複数のスタイルが定義されている場合は、IDセレクターによって指定されたスタイルが優先されます。そのため、同じID属性を持つ要素が複数存在する場合、スタイルが互いに競合することがあり、スタイルの正しい適用が行われない可能性があります。

/* .my-classは反映されない */
.my-class {
  background-color: red;
}
/* #my-elementが反映される */
#my-element {
  background-color: yellow;
}

これらの例では、IDセレクターを他のセレクターと組み合わせることによって、より柔軟にスタイルを適用することができます。

2.実践

lesson3-3.htmlファイルを作成してあげてください。
次に以下のソースコードをコピーしてlesson3-3.htmlファイルに貼り付けます。

lesson3-3.html

<!DOCTYPE html>
<html>
  <style>
    .my-class {
      color: red;
    }
    #my-element {
      color: yellow;
    }
  </style>
  <body>
    <p id="my-element" class="my-class">こんにちは</p>
  </body>
</html>

コードを貼り付けたらwindowsの場合ctrl+s、mac場合cmd+sでコードを保存します。
ドラッグ&ドロップでファイルをブラウザに渡して、文字が黄色になっていれば成功です。