【CSS･html】idやclassの複数指定、同時指定方法

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

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

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

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

CSSセレクタ一覧【擬似要素,擬似クラス,属性セレクタ】

主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。

この記事を読む

結論

idとclass同時指定は可能

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

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

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

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

注意点（間違った記述）

NG. idの複数指定

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

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

NG. class属性の2回記述

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

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

以下のように直しましょう。

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

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

特定のidだけ

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

#main{color:red}

特定のclassだけ

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

.example{color:red}

特定のidとclass両方

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

#main.example{color:red}

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

複数のclass

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

.example.box{color:red}

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

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

まとめ

OK

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

NG

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む