CSSセレクターの種類一覧｜初心者向けに選び方と使い分けをコードで解説

CSSの「種類」を調べていると、セレクター、プロパティ、CSSの読み込み方法など複数の情報が出てきます。何を覚えればよいのか、最初は迷いますよね。

この記事では、CSSで「どのHTML要素にデザインを適用するか」を決めるセレクターの種類を解説します。要素型、class、ID、属性、擬似クラス、擬似要素、結合子を、実際のコードで使い分けられるようにしましょう。

CSSのセレクター・プロパティ・値の違いから確認したい方は、次の記事を先に読むと理解しやすくなります。

CSSセレクターとは

セレクターとは、CSSを適用するHTML要素を選ぶための記述です。次のコードでは、.cardがセレクター、colorがプロパティ、#1e293bが値です。

.card {
  color: #1e293b;
}

セレクターの後ろに波括弧を書き、その中へ変更したいプロパティと値を記述します。CSSの基本ルールを詳しく確認したい場合は、次の記事も参考にしてください。

CSSセレクターの種類一覧

最初に、よく使うセレクターを一覧で比べてみましょう。基本は要素型・class・IDで、必要に応じて属性や状態、要素同士の関係を条件に加えます。

上の図のように、セレクターはHTML文書の中から条件に合う要素を探します。種類ごとの違いを、ここからコードで確認していきましょう。

全称セレクターと要素型セレクター

全称セレクターはすべての要素を選ぶ

アスタリスクの*は、すべての要素を選ぶ全称セレクターです。ページ全体で共通にしたい基本設定に使います。

*,
*::before,
*::after {
  box-sizing: border-box;
}

この例では、すべての要素と擬似要素で、指定した幅にpaddingとborderを含めて計算します。全要素へ色や余白まで指定すると意図しない場所も変わるため、共通設定に絞るのが安全です。

要素型セレクターはタグ名で選ぶ

pやh2のようにHTMLタグ名を書くと、同じタグの要素がまとめて選ばれます。記事内のすべての段落など、広い範囲に同じ見た目を適用するときに便利です。

<h2>CSSを学ぼう</h2>
<p>セレクターの種類を確認します。</p>
<p>タグ名が同じ段落は両方選ばれます。</p>

h2 {
  color: #1d4ed8;
}

p {
  line-height: 1.8;
}

変更後は見出しが青色になり、2つの段落の行間が広がります。一部分だけ変えたい場合は、次のclassセレクターが向いています。

classセレクターとIDセレクター

classセレクターは繰り返し使える

class名の前にピリオドを付けた.cardがclassセレクターです。同じclassは複数の要素へ付けられるため、カードやボタンなど再利用するデザインに適しています。

<article class="card">HTML入門</article>
<article class="card">CSS入門</article>

.card {
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

変更後は、2つの記事が同じ余白・枠線・角丸を持つカードになります。classの付け方そのものを確認したい方は、次の記事も参考にしてください。

IDセレクターは一意のidを選ぶ

id名の前にハッシュ記号を付けた#mainがIDセレクターです。HTMLのidはページ内で重複させず、一つの要素を識別するために使います。

<main id="main-content">
  <h1>CSSセレクター入門</h1>
</main>

#main-content {
  width: min(100% - 2rem, 60rem);
  margin-inline: auto;
}

IDセレクターはclassより優先されやすく、後から上書きしにくい特徴があります。見た目の指定では再利用しやすいclassを基本にし、idはページ内リンクやJavaScriptから一意に識別するときに使うと管理しやすくなります。

属性セレクターで属性や値を条件にする

属性セレクターは、HTML要素が持つtypeやhrefなどの属性を条件にします。フォームの入力欄やリンクを種類別に装飾するときに役立ちます。

<label for="email">メールアドレス</label>
<input id="email" type="email" required>

<a href="guide.pdf">資料をダウンロード</a>

input[type="email"] {
  border: 2px solid #2563eb;
}

[required] {
  background-color: #eff6ff;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
}

変更後はメール入力欄が青い枠と薄い背景になり、PDFへのリンク末尾には「(PDF)」が表示されます。属性値の大文字・小文字やURLの形式も条件判定に影響するため、実際のHTMLを確認して指定しましょう。

擬似クラスで状態や位置を選ぶ

擬似クラスは、要素の状態や文書内の位置を条件にします。名前の前にコロンを一つ付け、:hoverや:first-childのように書きます。

.button {
  color: #ffffff;
  background-color: #2563eb;
}

.button:hover {
  background-color: #1d4ed8;
}

.button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

変更後は、マウスを重ねると背景色が濃くなり、キーボードでフォーカスすると輪郭が表示されます。:hoverだけではタッチ操作やキーボード操作に変化が伝わらないため、:focus-visibleなども組み合わせましょう。

擬似要素で要素の一部分を選ぶ

擬似要素は、要素内の一部分やCSSで生成する部分を選びます。擬似クラスと区別しやすいように、現在はコロンを二つ付けた::beforeや::first-lineの形で書くのが基本です。

.note::before {
  content: "POINT";
  display: inline-block;
  margin-right: 0.5rem;
  color: #1d4ed8;
  font-weight: 700;
}

.article p::first-line {
  font-weight: 700;
}

::beforeは要素内容の先頭に装飾を追加し、::first-lineは段落の先頭行を選びます。ただし、contentで追加した重要な情報は読み上げ方が一定ではありません。意味を伝える本文はHTMLに書き、擬似要素は補助的な装飾に使いましょう。

結合子で親子・兄弟関係を指定する

結合子は複数のセレクターをつなぎ、HTML要素同士の関係を条件にします。スペースにも意味がある点がポイントです。

<article class="card">
  <h2>CSS入門</h2>
  <p>見出し直後の説明です。</p>
  <div>
    <p>さらに内側の説明です。</p>
  </div>
</article>

.card p {
  color: #334155;
}

.card > p {
  font-weight: 700;
}

.card h2 + p {
  margin-top: 0.5rem;
}

変更後は2つの段落が灰色になり、直下にある最初の段落だけが太字になります。HTMLの階層を変えると対象も変わるため、長い結合を重ねすぎず、必要なら要素へclassを付けると意図が明確です。

複数のセレクターをまとめて指定する

同じCSSを複数の対象へ適用するときは、セレクターをカンマで区切ります。これをセレクターリストと呼びます。

h2,
h3,
h4 {
  line-height: 1.4;
  color: #172554;
}

カンマを付けずにh2 h3と書くと、「h2の内側にあるh3」という別の意味になります。また、通常のセレクターリストに無効なセレクターが一つ含まれると、リスト全体の指定が無効になるため、スペルミスにも注意してください。

便利な関数型擬似クラス

基本の種類に慣れたら、括弧内へ条件を書く関数型擬似クラスも便利です。無理に使う必要はありませんが、複雑なセレクターを短くできます。

.article :is(h2, h3) {
  scroll-margin-top: 5rem;
}

.card:has(img) {
  display: grid;
  grid-template-columns: 8rem 1fr;
}

.menu a:not(.active) {
  color: #475569;
}

:where()は詳細度が0なので、後からclassで上書きしやすい共通ルールに向いています。新しい機能を実案件で使うときは、対象ブラウザの対応状況も確認しましょう。

セレクターの選び方と詳細度

複数のCSSが同じ要素・同じプロパティを指定した場合は、セレクターの詳細度や記述順などによって採用されるルールが決まります。大まかには、ID、class・属性・擬似クラス、要素型・擬似要素の順で詳細度が高くなります。

<p id="notice" class="message">お知らせです。</p>

p {
  color: green;
}

.message {
  color: blue;
}

#notice {
  color: red;
}

この場合はIDセレクターの指定が優先され、文字は赤色になります。ただし、詳細度を上げて競争させる書き方は修正を難しくします。普段の部品デザインは短いclassセレクターを中心にするとよいでしょう。

• ページ全体の基本設定には要素型や全称セレクターを使う
• 繰り返す部品のデザインにはclassを使う
• フォームやリンクの性質で分けるときは属性セレクターを使う
• 操作状態には擬似クラス、一部分の装飾には擬似要素を使う
• HTMLの階層に強く依存する長いセレクターは避ける

カードを作りながら種類を使い分ける

最後に、複数のセレクターを組み合わせたカードを作ります。変更前は見出し、説明、リンクが縦に並ぶだけです。

<article class="card">
  <p class="card__label">初心者向け</p>
  <h2 class="card__title">CSSセレクター入門</h2>
  <p>種類と使い分けをコードで学びます。</p>
  <a class="card__link" href="lesson.html">記事を読む</a>
</article>

.card {
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgb(15 23 42 / 10%);
}

.card > * + * {
  margin-top: 0.75rem;
}

.card__label {
  color: #1d4ed8;
  font-weight: 700;
}

.card__link[href$=".html"] {
  display: inline-block;
  color: #ffffff;
  background-color: #2563eb;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.card__link:hover {
  background-color: #1d4ed8;
}

.card__link:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

変更後は、classセレクターでカードとラベルを整え、子・兄弟関係で余白を付け、属性セレクターでHTMLリンクをボタン風にします。さらに擬似クラスでマウスとキーボードの操作状態を分かりやすくしています。

色や余白など、カードで使ったプロパティを探したいときはCSSコード一覧も活用してください。

セレクターが効かないときの確認項目

• classの先頭に.、idの先頭に#を付けているか
• HTMLとCSSでclass名の大文字・小文字やハイフンが一致しているか
• 子孫のスペース、子の>、兄弟の+や~を取り違えていないか
• カンマ区切りの中に存在しない記号やスペルミスがないか
• より詳細度の高いセレクターや後ろのCSSに上書きされていないか
• CSSファイルがHTMLから正しく読み込まれているか

ブラウザの開発者ツールで対象要素を選ぶと、どのCSSが適用され、どの指定が打ち消されているか確認できます。まず短いセレクターで試し、少しずつ条件を足すと原因を見つけやすくなります。

CSSセレクターの種類まとめ

CSSセレクターは、デザインを適用するHTML要素を選ぶ仕組みです。まずは要素型とclassを基本にし、属性、状態、親子関係などの条件が必要なときに別の種類を組み合わせます。

すべてを一度に暗記する必要はありません。「何を条件に選びたいか」を考え、一覧から合う種類を選んでください。迷ったら、再利用しやすく詳細度も管理しやすいclassセレクターから試すのがおすすめです。

仕様を詳しく確認するときは、MDNのCSS セレクターリファレンス、基本セレクター、結合子、擬似クラスと擬似要素も参考になります。