質問: 模写の際CSSのコードを記入していると、`#header`, `#footer` のような記述があります。 `.header` または `header, footer` を使うことによりHTML要素を指定できるのは知っていますが、`#` を使った指定方法は知りませんでした。 ぼくは、この `#` がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。 ご教授いただけると嬉しいです。
回答: `id` と `class` の違い シャープ記号を用いる **`id` セレクタ** (`#example`) は `id` 属性の値に基づき要素を選択します。`id` 属性の値はドキュメントにおいて**一意**である必要があります。 ドット記号を用いる **`class` セレクタ** (`.example`) は `class` 属性の値に基づき要素を選択します。`class` 属性の値はドキュメントにおいて一意である必要はなく、**複数の要素**に割り当てることが出来ます。つまり、「**複数の要素へ同じ値を割り当てられるか**」という点で `id` 属性 と `class` 属性は異なります。 `id` と `class` の使い分け これら 2 つの使い分けとして、「特定の要素を参照する場合は `id`、同じ装飾が多数の要素に割り当てられている場合は `class` を用いる」、といった方針があります。これは **`id` 属性は要素の一意な識別子**として使用し、 **`class` 属性は装飾**のために使うということです。 具体的に `id` 属性が用いられる場面は、次のようなものが挙げられます: * この装飾が割り当てられた要素がドキュメント上に 2 つ以上存在しないことを示したい * フラグメントによりドキュメントの特定箇所へリンクをしたい * 特定要素を JavaScript の操作対象にしたい