CSSセレクタとは？要素・class・idの違いと書き方を初心者向けに解説

2026年8月27日2026年10月9日

CSSを書こうとして、「pと.noticeは何が違うの？」「classとidのどちらを使えばよい？」と迷っていませんか。

セレクターは、HTMLのどの要素にCSSを適用するかを決める部分です。まず「同じ種類をまとめて選ぶ」「同じ名前の要素を選ぶ」の違いを押さえると、記号の意味を整理できます。

この記事では、HTMLとCSSの役割を学び、セレクターの指定に迷っている方へ、要素・class・idの違いを同じコードで説明します。PCで練習用ファイルを作り、狙った要素だけに装飾が付いたか確認するところまで進めます。HTMLとCSSの役割から整理したい方は、HTMLとCSSの役割の違いも先に確認してください。

この記事で分かること

CSSセレクターの役割と、CSSルール内の位置
要素・class・idセレクターの書き方と選ぶ範囲
classとidを使い分ける判断基準
カンマ・空白・記号で選択範囲が変わる仕組み
セレクターが一致しないときの確認順

CSSセレクターの役割

CSSセレクターとは、CSSのプロパティと値をどのHTML要素へ適用するか、ブラウザーへ伝える部分です。MDNの基本的なCSSセレクターでも、CSSルールの最初の部分として説明されています。

「セレクタ」と「セレクター」は同じ意味です。CSSでは、セレクターの後ろに{ }を書き、その中へ変更内容を並べます。

次のCSSでは、{ }の前にあるpがセレクターです。

p {
  color: #536048;
}

このルールは、「ページ内のp要素を選び、文字色を#536048にする」と読めます。colorは変更する項目を表すプロパティ、#536048は色を表す値です。color: #536048;のような一組を宣言と呼びます。これらはCSSファイルへ書く記法で、HTMLの開始タグ内に書くclass・id属性とは記述場所が異なります。

HTMLとCSSの対応

セレクターの基本は、HTMLに書かれた要素名・class属性値・id属性値のいずれかを手がかりにすることです。

<h1 id="main-title">CSSを学ぼう</h1>
<p class="lead">セレクターから始めます。</p>

h1：要素名をそのまま書いて選ぶ
.lead：class="lead"をピリオド付きで選ぶ
#main-title：id="main-title"を#付きで選ぶ

HTMLのclass・id属性には名前を書き、CSSでその名前を選ぶときに.や#を付けます。たとえばclass="lead"を選ぶCSSは.leadです。名前の先頭へ記号を付け足してclass=".lead"にする必要はありません。

HTMLのh1、class="lead"、id="main-title"に対応するCSSセレクターは、h1、.lead、#main-title — HTMLの名前とCSSのセレクターを対応させる

HOAI Point

セレクターを決める前に、「同じ種類すべて」「繰り返す部品」「ページ内の一つ」のどこまで選びたいかを言葉にしましょう。適用範囲が決まると、要素・class・idを選びやすくなります。

要素・class・idセレクターの違い

3種類の違いは、主に選ぶ手がかりと適用範囲です。

種類	CSSの書き方	選ぶ範囲・主な用途
要素セレクター	`p`	同じ要素名をまとめて選ぶ
classセレクター	`.notice`	同じclass名を持つ要素を繰り返し選ぶ
idセレクター	`#main-title`	ページ内で一意のidを持つ要素を選ぶ

要素セレクターの書き方

要素セレクターは、HTMLの要素名をそのまま書きます。次のCSSは、ページ内にあるすべてのp要素を選びます。

p {
  line-height: 1.8;
}

line-height: 1.8;は、文字サイズの1.8倍の行の高さを指定します。この倍率には単位を付けません。段落全体の行間や、見出し全体の基本スタイルなど、同じ要素へ共通の見た目を指定するときに向いています。一部だけを変えたい場合まで要素セレクターで指定すると、意図しない場所にも広がります。

要素名そのものに不安がある場合は、HTMLタグの基本と書き方を確認してください。仕様上の選択範囲は、MDNの要素型セレクターでも確認できます。

classセレクターの書き方

classセレクターは、HTMLのclass属性値を手がかりにします。CSSではclass名の先頭にピリオド（.）を付けます。

<p class="notice">保存してから再読み込みします。</p>
<p class="notice">class名のつづりを確認します。</p>

.notice {
  padding: 16px;
  border-left: 4px solid #C28A3D;
}

同じclass="notice"を持つ2つの段落に、同じスタイルが適用されます。padding: 16px;は内側の余白、border-leftは左側の枠線を指定しています。pxはピクセルを表す単位で、この例の長さには単位も含めて書きます。一つの要素にclass="notice important"と書けば、noticeとimportantの2つのclassを付けられます。CSSの.noticeは、このように複数のclassが付いた要素にも一致します。詳しい構文はMDNのクラスセレクターを参照できます。

idセレクターの書き方

idセレクターは、HTMLのid属性値を手がかりにします。CSSではid名の先頭に#を付けます。

<h1 id="main-title">CSSを学ぼう</h1>

#main-title {
  border-bottom: 3px solid #C28A3D;
}

同じidの値は、一つのHTML文書内で重複させません。 id="main-title"を付けるのは、そのページ内で一つの要素だけです。idはページ内リンクや、フォームの説明文と入力欄の対応付けなどにも使われます。

MDNのIDセレクターでは、id属性値と完全一致する要素を選ぶと説明されています。HTML側の一意性はHTMLのidグローバル属性で確認できます。

class名・id名の付け方

初めて名前を付けるときは、noticeやmain-titleのように、英字で始め、半角英数字とハイフンで役割を表す名前にすると扱いやすくなります。大文字と小文字もそろえ、HTMLのclass="notice"に対してCSSを.Noticeにしないようにしましょう。

日本語を含む名前も使えますが、数字で始まる名前や一部の記号は、CSSセレクターで使うときにエスケープ（特別な文字を読み取れる形へ書き換える処理）が必要です。たとえばclass="123item"に対する.123itemは、そのままでは無効です。自分で付ける名前ならitem-123のようにして、このつまずきを避けられます。

同じHTMLで3種類の選ばれ方を比べる

次のHTMLには、h1要素が一つ、class="lead"を持つp要素が二つ、id="main-title"を持つ要素が一つあります。

この節では、PCのテキストエディターで練習用ファイルを作り、ブラウザーで結果を確かめます。ファイルの作成・保存・開き方に不安がある方は、HTMLの基本構造と最初のWebページの作り方を確認してください。

練習専用の新しいフォルダーを作り、その中にindex.htmlとstyle.cssを保存します。まず、次のHTML全体をテキストエディターに貼り付け、文字コードをUTF-8にしてindex.htmlという名前で保存してください。拡張子が.html.txtになっていないことも確認します。<link rel="stylesheet" href="style.css">が、同じフォルダーにあるCSSファイルを読み込む指定です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSSセレクターの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="main-title">CSSを学ぼう</h1>
  <p class="lead">要素セレクターを学びます。</p>
  <p class="lead">classセレクターを学びます。</p>
  <p>最後にidセレクターを学びます。</p>
</body>
</html>

次のCSS全体を新しいテキストファイルに貼り付け、同じフォルダーへstyle.cssという名前で保存します。拡張子は.cssとし、<style>タグでは囲みません。両方を保存したら、index.htmlをブラウザーへドラッグして開き、次の変化を確かめてください。コードを変更した後も、保存してからブラウザーを再読み込みします。

h1 {
  color: #536048;
}

.lead {
  font-weight: 700;
}

#main-title {
  border-bottom: 3px solid #C28A3D;
}

h1は、h1要素一つを選び、文字色を変える
.leadは、class="lead"を持つ2つの段落を選び、太字にする
#main-titleは、id="main-title"を持つ一つの見出しを選び、下線を付ける

一つのHTML要素が複数のセレクターに一致することもあります。この例のh1は、要素セレクターh1とIDセレクター#main-titleの両方に一致するため、文字色と下線の両方が適用されます。

見出しに色と下線が付き、最初の2つの段落だけが太字になり、最後の段落は通常の太さなら、3種類の指定を確認できています。さらに、最初の段落だけclass="lead"をclass="intro"へ変えて保存・再読み込みすると、その段落が太字から戻ります。CSSの.leadと名前が一致しなくなったためです。確認後はclass="lead"へ戻して保存してください。

classとidの併用

一つの要素にclassとidを両方付けても構いません。

<h1 id="main-title" class="page-heading">CSSを学ぼう</h1>

id="main-title"はページ内で一意の識別、class="page-heading"は他のページや部品でも再利用する見た目、というように役割を分けられます。ただし、必要のないidまで装飾目的だけで増やす必要はありません。

classとidはどう使い分ける？

CSSで見た目を指定するときは、繰り返し使えて調整しやすいclassを基本にすると整理しやすくなります。idセレクターでも装飾できますが、idには一意性があり、classより詳細度が高いため、後から別のスタイルで上書きしにくくなることがあります。詳細度とは、同じプロパティの指定が重なったときに、どのCSSを優先するか決める目安です。

classを使う場面

お知らせ、ボタン、カード、補足文など、同じ役割の見た目を複数箇所や複数ページで使うならclassが向いています。役割が分かる名前を付ければ、HTMLを見たときにも意図を判断しやすくなります。

<p class="notice">入力内容を確認してください。</p>
<p class="notice">送信後は画面を閉じてください。</p>

idを使う場面

ページ内リンクの到達先や、フォームの説明文と入力欄の対応付けなど、他と区別する名前が必要なときはidを使います。

<a href="#contact">お問い合わせへ移動</a>

<h2 id="contact">お問い合わせ</h2>

この例では、href="#contact"とid="contact"が対応し、同じページ内の見出しへ移動できます。idはCSS専用の属性ではない点も覚えておきましょう。

適用範囲による選び方

ページ内の同じ要素すべてを整える：要素セレクター
同じ役割の部品を繰り返し整える：classセレクター
ページ内の一つを識別する必要がある：idを付ける

HOAI Point

見た目の指定だけが目的なら、まずclassを検討します。 idは「一つだけだから使う」のではなく、ページ内リンクやフォーム、JavaScriptなどで一意の識別が必要かを基準に選びましょう。

詳細度を比べるとき、単独の要素セレクターよりclass、classよりidのほうが高くなります。ただし、CSSの優先順位には!importantや読み込まれ方など、詳細度より先に判断される条件もあります。「idなら必ず勝つ」「後に書けば必ず上書きできる」とは限りません。発展内容はMDNの競合の処理で確認できます。

複数の要素や条件を指定する書き方

3種類の基本を覚えたら、カンマや空白を使う書き方も少しずつ試せます。記号の有無で選ぶ範囲が変わるため、まずは次の3パターンだけ区別してください。

カンマによる複数指定

複数のセレクターをカンマで区切ると、同じ宣言をまとめて適用できます。

h2,
h3 {
  color: #536048;
}

この例では、すべてのh2要素とh3要素を選びます。改行は読みやすくするためのもので、h2, h3と一行に書いても同じです。カンマは「どちらの対象にも適用する」区切りだと覚えましょう。詳しい書き方はMDNのセレクターリストで確認できます。

空白なしの指定（p.notice）

p.noticeのように空白なしで続けると、「p要素であり、noticeクラスも持つ」という両方の条件に一致する要素を選びます。

p.notice {
  color: #C28A3D;
}

.noticeだけなら要素の種類を問いません。p.noticeなら<p class="notice">は選びますが、<div class="notice">は選びません。

空白ありの指定（p .notice）

p .noticeのように空白を入れると、「p要素の内側にある、noticeクラスを持つ要素」を選びます。空白なしのp.noticeと、次の同じHTMLで比べてください。先ほどのindex.htmlでは、<body>と</body>の間だけを次のHTMLへ置き換え、開始・終了タグは残します。style.css全体をその下のCSSへ置き換えたら、両方を保存してブラウザーを再読み込みします。

<p class="notice">段落そのものが対象です。</p>
<p>この段落には<span class="notice">内側の対象</span>があります。</p>

p.notice {
  border: 2px solid #C28A3D;
}

p .notice {
  font-weight: 700;
}

上のCSSを適用すると、p.noticeは一つ目の段落全体に枠線を付け、p .noticeは二つ目の段落内のspan要素だけを太字にします。spanは文章の一部分を囲む要素です。空白で結ぶ指定は、すぐ内側の要素だけでなく、さらに深い階層にも一致します。MDNの子孫結合子も、この親・子・孫という関係を説明しています。

p.noticeはnoticeクラスを持つp自身を選び、p .noticeはpの内側にあるnoticeクラスのspan要素を選ぶ — 空白の有無で、同じ要素か内側の要素かが変わる

HOAI Point

長いセレクターを最初から組み立てず、まず.noticeのような短い指定で対象を確認しましょう。意図した要素を選べてから条件を加えると、どこで一致しなくなったかを追いやすくなります。

CSSセレクターが効かないときの確認順

「CSSが読み込まれていない」「セレクターが対象に一致しない」「一致したCSSが別の指定に上書きされた」は、確認する場所が異なります。次の順で一つずつ切り分け、修正するたびに保存・再読み込みして結果を見ましょう。

保存と読み込みを確認する：HTMLとCSSを両方保存し、ブラウザーを再読み込みします。この記事の例なら、index.htmlとstyle.cssが同じフォルダーにあり、href="style.css"になっているか確認します。
記号・名前・空白を確認する：class="notice"には.notice、id="main-title"には#main-titleを対応させます。大文字・小文字、全角文字、p.noticeとp .noticeの違いも見比べます。
宣言の書き方を確認する：{ }、プロパティと値の間の:、宣言末尾の;を確認します。たとえばcolor: #536048;が正しい形です。無効な値を含む宣言は無視されます。
別の指定による上書きを確認する：同じ要素の同じプロパティへ、別のCSSを指定していないか確認します。ブラウザーの開発者ツールで対象要素のスタイルを見ると、適用候補のルールや取り消し線付きの宣言を手がかりにできます。取り消し線があれば、競合や無効な値を確認してください。

名前が一致しない場合は対象の選び方を、上書きされた場合は同じプロパティの競合を確認します。たとえばclass="notice"に対する.noticesは、名前が違うため一致しません。

同じid値の重複も修正が必要です。ただし、重複しているだけでidセレクターが必ず効かなくなるわけではありません。CSSが見えていても、同じidはページ内で一つに直し、繰り返す装飾にはclassを使いましょう。

狙った要素に指定した見た目が付き、変更したくない要素へ広がっていないことを確認できたら、切り分けは完了です。途中で解決した場合は、残りの確認を続ける必要はありません。まだ違う場合は、次の確認項目へ進んでください。

よくある質問

classは同じページで何回使えますか？: 同じclass名を複数の要素へ付けられます。共通の見た目や役割を繰り返すときに使います。一つの要素へ複数のclassを付ける場合は、class="notice important"のように半角スペースで区切ります。
idは本当に一つの要素だけですか？: id属性を持つ要素は、同じページ内に複数あっても構いません。ただし、同じid値は1ページ内で1回だけ使用します。別のページでは、同じid値を使用できます。
classとidを同じ要素へ付けてもよいですか？: はい。<h1 id="main-title" class="page-heading">のように併用できます。idは一意の識別、classは見た目の再利用というように、目的を分けると管理しやすくなります。
CSSではclassとidのどちらを使うべきですか？: 見た目を指定する目的なら、まずclassを検討します。idセレクターでもCSSは適用できますが、同じidを同一ページの複数要素へ再利用することはできません。詳細度も高いため、あとから上書きしにくくなることがあります。idは一意の識別が必要な場面で使います。
class名やid名は日本語でも書けますか？: はい、日本語も使えます。ただし、数字で始まる名前や一部の記号は、CSSセレクターで使うときにエスケープが必要です。初めはmain-titleやnoticeのように英字で始め、半角英数字とハイフンで役割を表す名前にすると扱いやすくなります。