模写の際CSSのコードを記入していると、#header
, #footer
のような記述があります。
.header
または header, footer
を使うことによりHTML要素を指定できるのは知っていますが、#
を使った指定方法は知りませんでした。
ぼくは、この #
がより優先度を高くするために用いられる記号なのかなと考えておりますが、疑問に思ったため質問させていただきます。
ご教授いただけると嬉しいです。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するid
と class
の違いシャープ記号を用いる id
セレクタ (#example
) は id
属性の値に基づき要素を選択します。id
属性の値はドキュメントにおいて一意である必要があります。
ドット記号を用いる class
セレクタ (.example
) は class
属性の値に基づき要素を選択します。class
属性の値はドキュメントにおいて一意である必要はなく、複数の要素に割り当てることが出来ます。つまり、「複数の要素へ同じ値を割り当てられるか」という点で id
属性 と class
属性は異なります。
id
と class
の使い分けこれら 2 つの使い分けとして、「特定の要素を参照する場合は id
、同じ装飾が多数の要素に割り当てられている場合は class
を用いる」、といった方針があります。これは id
属性は要素の一意な識別子として使用し、 class
属性は装飾のために使うということです。
具体的に id
属性が用いられる場面は、次のようなものが挙げられます:
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
/** IDに対する指定 */
#cat {
color: red;
}
/** classに対する指定 */
.dog {
color: blue;
}
<p id="cat">CAT</p>
<p class="dog">DOG1</p>
<p class="dog">DOG2</p>
#
や.
を使った属性には id や class という名前が付いていることはご存知でしたでしょうか?