ホーム(記事一覧)へ

【CSS・html】idやclassの複数指定、同時指定の注意点

CSSではidとclassを使って他の要素と区別します。

では、idとclassは同時に使えるのか!?idを複数指定できるのか!?

CSS・htmlでidとclass同時指定、複数指定の注意点について説明します。

そもそもidやclassなどのセレクタがよくわからんというかたは以下の記事で確認してくださいね

結論

idとclass同時指定は可能

idとclassを同時に指定するときは以下のように記述します。

<div id="main" class="example">テキスト</div>

idは一つだけ、classは複数指定可能

classを複数指定するときは半角スペースで空けて指定します

<div id="main" class="example box">テキスト</div>

注意点(間違った記述)

NG. idの複数指定

classと違いidは複数指定できません。

<div id="main wrap" class="example">テキスト</div>

NG. classの2回記述

classは確かに複数指定できますが、一つの要素内にclassを2回記述することはできません。

<div id="main" class="example" class="box">テキスト</div>

特定のidとclass両方がある要素に対するセレクタ指定方法

特定のidだけ

html

<div id="main">テキスト</div>

CSS

#main{color:red}

特定のclassだけ

html

<div class="example">テキスト</div>

CSS

.example{color:red}

特定のidとclass両方

html

<div id="main" class="example">テキスト</div>

CSS

#main.example{color:red}

セレクタ同士を空白スペースなしでくっつけて記述すると特定のidとclass両方がある要素にだけ指定できます。

複数のclass

html

<div class="example box">テキスト</div>

CSS

.example.box{color:red}

2つ以上のclassを指定する場合、html側は空白で空けて、CSSセレクタ側は空白スペースなしでくっつけます。

idやclassなどのセレクタを複数指定する方法については以下の記事をご覧ください。

まとめ

OK

  • idとclass同時指定は可能
  • idは一つだけ、classは複数指定可能

NG

  • idの複数指定
  • classの2回記述

以上、CSS・htmlでidとclass同時指定、複数指定の注意点でした。

関連記事