71341


模写の際CSSのコードを記入していると、`#header`, `#footer` のような記述があります。

`.header` または `header, footer` を使うことによりHTML要素を指定できるのは知っていますが、`#`
を使った指定方法は知りませんでした。

ぼくは、この `#` がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。

ご教授いただけると嬉しいです。


CC BY-SA 4.0
2020-10-20T04:53:05.573
71340
2020-10-22T12:46:25.967
2020-10-22T12:46:25.967
32986
42391
question
html css
セレクタにシャープ記号(#)を使う意味と、ドット記号(.)を使う時との違いは？


W3Cには`id`と`class`が定義されています。  
以下の例のように、class名を指定する場合は `.` を、id名を指定する場合は `#` を利用します。

こちらのリンクも参考にしてみてください。  
<https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id>  
<https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class>

[code]

    /** IDに対する指定 */
    #cat {
      color: red;
     }
     
    /** classに対する指定 */
     .dog {
      color: blue;
    }
[/code]

[code]

    <p id="cat">CAT</p>
    
    <p class="dog">DOG1</p>
    <p class="dog">DOG2</p>
[/code]


CC BY-SA 4.0
2020-10-20T05:59:32.580
71341
2020-10-20T05:59:32.580
40092
71340
answer


## `id` と `class` の違い

シャープ記号を用いる **`id` セレクタ** (`#example`) は `id` 属性の値に基づき要素を選択します。`id`
属性の値はドキュメントにおいて **一意** である必要があります。

ドット記号を用いる **`class` セレクタ** (`.example`) は `class` 属性の値に基づき要素を選択します。`class`
属性の値はドキュメントにおいて一意である必要はなく、 **複数の要素** に割り当てることが出来ます。つまり、「
**複数の要素へ同じ値を割り当てられるか** 」という点で `id` 属性 と `class` 属性は異なります。

## `id` と `class` の使い分け

これら 2 つの使い分けとして、「特定の要素を参照する場合は `id`、同じ装飾が多数の要素に割り当てられている場合は `class`
を用いる」、といった方針があります。これは **`id` 属性は要素の一意な識別子**として使用し、 **`class`
属性は装飾**のために使うということです。

具体的に `id` 属性が用いられる場面は、次のようなものが挙げられます：

  * この装飾が割り当てられた要素がドキュメント上に 2 つ以上存在しないことを示したい
  * フラグメントによりドキュメントの特定箇所へリンクをしたい
  * 特定要素を JavaScript の操作対象にしたい


CC BY-SA 4.0
2020-10-20T06:00:41.563
71342
2020-10-20T06:08:12.933
2020-10-20T06:08:12.933
32986
32986
71340
answer