1

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

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

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

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

1
  • 参考までに、#. を使った属性には id や class という名前が付いていることはご存知でしたでしょうか?
    – cubick
    2020年10月21日 8:53

2 件の回答 2

3

idclass の違い

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

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

idclass の使い分け

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

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

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

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

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

/** IDに対する指定 */
#cat {
  color: red;
 }
 
/** classに対する指定 */
 .dog {
  color: blue;
}
<p id="cat">CAT</p>

<p class="dog">DOG1</p>
<p class="dog">DOG2</p>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。