お問い合わせ
お問い合わせ
ホーム > CSS > CSSセレクタとは？種類と使い方をわかりやすく解説

CSSセレクタとは？種類と使い方をわかりやすく解説

CSS
CSSセレクタによってHTML要素へスタイルが適用される仕組みを表現したイメージ
CSSセレクタがHTML要素を指定し、デザインが適用される流れを視覚的に表現したアイキャッチ画像です。要素セレクタ・クラスセレクタ・IDセレクタなどの基本概念をイメージできます。

CSSセレクタとは、CSSでスタイルを適用する対象を指定するための書き方です。

HTMLには見出し、文章、画像、ボタン、リストなど、さまざまな要素があります。CSSで見た目を整えるには、「どのHTML要素に対してスタイルを当てるのか」を指定する必要があります。その指定に使うものがCSSセレクタです。

たとえば、すべてのpタグの文字色を変えたい場合は、pというセレクタを使います。特定のクラス名が付いた要素だけを装飾したい場合は、.class名という形で指定します。

CSSセレクタを理解すると、狙った要素に正しくスタイルを適用できるようになります。CSSの基本を学ぶうえで、セレクタは避けて通れない重要な知識です。

CSS全体の基本から確認したい場合は、CSSとは？基本の書き方と使い方を初心者向けに解説も参考になります。

CSSセレクタとは

CSSセレクタとは、HTML内のどの要素にCSSを適用するかを指定する部分です。

CSSは、基本的に次の形で書きます。

selector {
  property: value;
}

このうち、selectorの部分がCSSセレクタです。

たとえば、次のコードではpがセレクタです。

p {
  color: blue;
}

このCSSは、HTML内のすべてのp要素に対して、文字色を青にする指定です。

CSSでは、セレクタを正しく使うことで、特定の見出しだけ、特定のボタンだけ、特定のエリア内の文章だけなど、細かくスタイルを指定できます。

CSSセレクタの基本構造

CSSセレクタは、主に次のような形で使います。

h1 {
  font-size: 32px;
}

.text {
  color: #333;
}

#main {
  width: 100%;
}

h1は要素セレクタ、.textはクラスセレクタ、#mainはIDセレクタです。

HTML側では、次のように対応します。

<h1>CSSセレクタの基本</h1>

<p class="text">これは本文です。</p>

<div id="main">
  メインコンテンツです。
</div>

CSSセレクタは、HTMLのタグ名、class属性、id属性などをもとに対象を指定します。

CSSセレクタの主な種類

CSSセレクタには多くの種類があります。まずは、使用頻度の高い基本的なセレクタから理解すると、CSSが書きやすくなります。

要素セレクタ

要素セレクタは、HTMLタグ名をそのまま指定するセレクタです。

p {
  line-height: 1.8;
}

この例では、すべてのp要素にline-heightが適用されます。

HTMLは次のようになります。

<p>本文の1行目です。</p>
<p>本文の2行目です。</p>

要素セレクタはシンプルですが、対象範囲が広くなりやすい点に注意が必要です。サイト全体の基本スタイルを整える場合には便利ですが、個別のパーツに細かく指定したい場合は、クラスセレクタを使うことが一般的です。

クラスセレクタ

クラスセレクタは、class属性を持つ要素を指定するセレクタです。

CSSでは、クラス名の前にドットを付けて書きます。

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
}

HTMLでは、class属性にクラス名を指定します。

<a href="#" class="button">詳しく見る</a>

クラスセレクタは、CSSで最もよく使われるセレクタのひとつです。同じクラス名を複数の要素に付けることで、同じデザインを使い回すことができます。

クラス名の付け方に迷う場合は、BEMとは？CSS設計でよく使われる命名規則を解説も参考になります。

IDセレクタ

IDセレクタは、id属性を持つ要素を指定するセレクタです。

CSSでは、ID名の前に#を付けて書きます。

#header {
  background-color: #f5f5f5;
}

HTMLでは、id属性にID名を指定します。

<header id="header">
  <h1>サイトタイトル</h1>
</header>

IDは、HTML内で同じ値を複数回使わないことが基本です。そのため、IDセレクタは特定の1つの要素を指定したい場合に使われます。

ただし、CSSではIDセレクタの優先度が高く、後から上書きしにくくなることがあります。実務では、スタイル指定にはクラスセレクタを中心に使うことが多いです。

全称セレクタ

全称セレクタは、すべての要素を対象にするセレクタです。

* {
  box-sizing: border-box;
}

この例では、すべてのHTML要素にbox-sizing: border-box;を適用しています。

全称セレクタは便利ですが、すべての要素に影響するため、使いすぎには注意が必要です。初期設定やリセットCSSのような場面で使われることが多いです。

子孫セレクタ

子孫セレクタは、ある要素の中にある要素を指定するセレクタです。

セレクタ同士を半角スペースで区切って書きます。

.card p {
  color: #555;
}

このCSSは、.cardの中にあるp要素だけに適用されます。

<div class="card">
  <p>カード内の文章です。</p>
</div>

<p>カード外の文章です。</p>

この場合、カード内のp要素だけが対象になります。

子孫セレクタは便利ですが、深く書きすぎるとCSSが複雑になります。必要以上に長いセレクタは避けることが大切です。

子セレクタ

子セレクタは、直下の子要素だけを指定するセレクタです。

> を使って書きます。

.list > li {
  margin-bottom: 8px;
}

HTMLは次のようになります。

<ul class="list">
  <li>項目1</li>
  <li>
    項目2
    <ul>
      <li>内側の項目</li>
    </ul>
  </li>
</ul>

.list > liは、.listの直下にあるliだけを対象にします。内側のulに含まれるliには直接適用されません。

子孫セレクタよりも対象を限定しやすいため、構造を明確にしたい場合に便利です。

隣接兄弟セレクタ

隣接兄弟セレクタは、ある要素の直後にある兄弟要素を指定するセレクタです。

+を使って書きます。

h2 + p {
  margin-top: 16px;
}

HTMLは次のようになります。

<h2>見出し</h2>
<p>見出しの直後にある文章です。</p>
<p>次の文章です。</p>

この場合、h2の直後にあるpだけが対象になります。

見出しの直後の文章だけ余白を調整したい場合などに使えます。

後続兄弟セレクタ

後続兄弟セレクタは、ある要素の後に続く兄弟要素をまとめて指定するセレクタです。

~を使って書きます。

h2 ~ p {
  color: #444;
}

HTMLは次のようになります。

<h2>見出し</h2>
<p>1つ目の文章です。</p>
<p>2つ目の文章です。</p>

この場合、h2の後にある同じ階層のp要素が対象になります。

隣接兄弟セレクタよりも広い範囲を指定できます。

複数セレクタ

複数のセレクタに同じCSSを適用したい場合は、カンマで区切ります。

h1,
h2,
h3 {
  font-weight: bold;
}

この例では、h1、h2、h3に同じスタイルが適用されます。

同じCSSを何度も書かずに済むため、コードを整理しやすくなります。

複合セレクタ

複合セレクタは、複数の条件を組み合わせて指定するセレクタです。

たとえば、次のCSSは、buttonクラスとprimaryクラスの両方を持つ要素を対象にします。

.button.primary {
  background-color: blue;
}

HTMLは次のようになります。

<a href="#" class="button primary">送信する</a>
<a href="#" class="button">戻る</a>

.button.primaryは、buttonクラスとprimaryクラスの両方が付いている要素だけに適用されます。

クラスを組み合わせることで、基本デザインとバリエーションを分けて管理できます。

属性セレクタ

属性セレクタは、特定の属性を持つ要素を指定するセレクタです。

input[type="text"] {
  border: 1px solid #ccc;
}

HTMLは次のようになります。

<input type="text">
<input type="submit">

この場合、type=”text”のinputだけが対象になります。

属性セレクタは、フォーム要素や外部リンクの装飾などでよく使われます。

a[target="_blank"] {
  text-decoration: underline;
}
<a href="https://example.com" target="_blank">外部サイト</a>

属性をもとに細かく指定できるため、HTML構造を変えずにスタイルを分けたい場合に便利です。

疑似クラス

疑似クラスは、要素の状態や位置に応じてスタイルを指定するセレクタです。

代表的なものに:hover、:first-child、:nth-child()などがあります。

hover

:hoverは、マウスカーソルが乗ったときのスタイルを指定します。

.button {
  background-color: #333;
  color: #fff;
}

.button:hover {
  background-color: #666;
}

HTMLは次のようになります。

<a href="#" class="button">詳しく見る</a>

ボタンやリンクに動きを付けたい場合によく使われます。

first-child

:first-childは、最初の子要素を指定します。

.list li:first-child {
  font-weight: bold;
}

HTMLは次のようになります。

<ul class="list">
  <li>最初の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ul>

この場合、最初のliだけが太字になります。

nth-child

:nth-child()は、指定した順番の要素を対象にします。

.list li:nth-child(2) {
  color: red;
}

HTMLは次のようになります。

<ul class="list">
  <li>1番目の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
</ul>

この場合、2番目のliだけが赤色になります。

偶数番目や奇数番目を指定することもできます。

.list li:nth-child(even) {
  background-color: #f5f5f5;
}
<ul class="list">
  <li>1番目の項目</li>
  <li>2番目の項目</li>
  <li>3番目の項目</li>
  <li>4番目の項目</li>
</ul>

表やリストの交互背景などでよく使われます。

疑似要素

疑似要素は、要素の一部や、実際のHTMLには書かれていない仮想的な要素にスタイルを適用する仕組みです。

代表的なものに::before、::after、::first-letterなどがあります。

before

::beforeは、要素の中身の前に内容を追加する疑似要素です。

.label::before {
  content: "●";
  margin-right: 4px;
}

HTMLは次のようになります。

<p class="label">お知らせ</p>

この例では、「お知らせ」の前に●が表示されます。

after

::afterは、要素の中身の後に内容を追加する疑似要素です。

.link::after {
  content: " →";
}

HTMLは次のようになります。

<a href="#" class="link">詳しく見る</a>

リンクの後ろに矢印を付けるような装飾に使えます。

疑似要素は装飾として便利ですが、重要な文章をcontentで追加するのは避けるのが基本です。検索エンジンや読み上げ環境に正しく伝わりにくい場合があるためです。

CSSセレクタの優先順位

CSSでは、複数のスタイルが同じ要素に当たる場合、どの指定を優先するかというルールがあります。

たとえば、次のようなCSSがあるとします。

p {
  color: blue;
}

.text {
  color: red;
}

HTMLは次のようになります。

<p class="text">この文章の色を確認します。</p>

この場合、pセレクタよりも.textセレクタの方が優先度が高いため、文字色は赤になります。

基本的な優先度は、次の順番で高くなります。

  1. インラインスタイル
  2. IDセレクタ
  3. クラスセレクタ・属性セレクタ・疑似クラス
  4. 要素セレクタ・疑似要素
  5. 全称セレクタ

ただし、同じ優先度の場合は、後から書かれたCSSが優先されます。

.text {
  color: blue;
}

.text {
  color: red;
}

この場合、後に書かれたcolor: red;が適用されます。

CSSのスタイルが効かない原因を調べる場合は、CSSが反映されない原因と確認方法を解説も参考になります。

よく使うCSSセレクタの実践例

ここでは、実際のWeb制作でよく使うCSSセレクタの例を紹介します。

ボタンのスタイルを指定する

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

.button:hover {
  opacity: 0.8;
}
<a href="#" class="button">詳しく見る</a>

.buttonで通常時のスタイルを指定し、.button:hoverでマウスを乗せたときの変化を指定しています。

カード内の文章だけを指定する

.card {
  padding: 24px;
  border: 1px solid #ddd;
}

.card p {
  line-height: 1.8;
  color: #555;
}
<div class="card">
  <h2>カードタイトル</h2>
  <p>カード内の説明文です。</p>
</div>

<p>カード外の文章です。</p>

.card pと書くことで、カード内のp要素だけにスタイルを適用できます。

リストの最後だけ余白を消す

.list li {
  margin-bottom: 12px;
}

.list li:last-child {
  margin-bottom: 0;
}
<ul class="list">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

:last-childを使うと、最後の項目だけ別のスタイルを指定できます。リストやカードの余白調整でよく使われます。

偶数行だけ背景色を変える

.table-row:nth-child(even) {
  background-color: #f5f5f5;
}
<div class="table">
  <div class="table-row">1行目</div>
  <div class="table-row">2行目</div>
  <div class="table-row">3行目</div>
  <div class="table-row">4行目</div>
</div>

:nth-child(even)を使うと、偶数番目の要素だけにスタイルを適用できます。

CSSセレクタを使うときの注意点

CSSセレクタは便利ですが、書き方によっては管理しにくいCSSになることがあります。

セレクタを長くしすぎない

次のようなセレクタは、構造に依存しすぎています。

.main .section .inner .card p span {
  color: red;
}

このように長いセレクタは、HTML構造が少し変わるだけで効かなくなる可能性があります。また、優先度が高くなりすぎて上書きしにくくなります。

できるだけクラスセレクタを中心に、シンプルに指定することが大切です。

.card-text {
  color: red;
}

HTMLは次のようになります。

<p class="card-text">カードの説明文です。</p>

このように、役割が分かるクラス名を付けると、CSSを管理しやすくなります。

CSSの保守性を高めたい場合は、CSS設計とは？保守しやすいスタイルを書く基本を解説も参考になります。

IDセレクタを多用しない

IDセレクタは優先度が高いため、後からスタイルを上書きしにくくなる場合があります。

#button {
  background-color: blue;
}

実務では、次のようにクラスセレクタを使う方が管理しやすくなります。

.button {
  background-color: blue;
}

IDはJavaScriptで特定の要素を取得する場合や、ページ内リンクの移動先として使われることが多く、CSSの装飾ではクラスを中心に使うのが一般的です。

!importantに頼りすぎない

CSSでは、!importantを使うとスタイルの優先度を強制的に高めることができます。

.text {
  color: red !important;
}

ただし、!importantを多用すると、どのCSSが優先されているのか分かりにくくなります。結果として、修正が難しいCSSになりやすいです。

基本的には、セレクタの設計や読み込み順を見直して対応することが大切です。

セレクタ名は意味が分かる名前にする

クラス名は、見た目だけでなく役割が分かる名前にすることが大切です。

たとえば、次のような名前は、後から見たときに意味が分かりにくくなる場合があります。

<div class="red-box">内容</div>

見た目が変わった場合、red-boxという名前と実際のデザインが合わなくなる可能性があります。

役割を表す名前にすると、管理しやすくなります。

<div class="notice-box">内容</div>

このように、何のための要素なのかが分かる名前にすると、CSSの保守性が高まります。

CSSセレクタを学ぶ順番

CSSセレクタは種類が多いため、最初からすべてを覚える必要はありません。

まずは、次の順番で理解すると学びやすくなります。

  1. 要素セレクタ
  2. クラスセレクタ
  3. IDセレクタ
  4. 子孫セレクタ
  5. 疑似クラス
  6. 疑似要素
  7. 属性セレクタ
  8. セレクタの優先順位

特に、実務ではクラスセレクタを中心に使うことが多いため、class属性とクラスセレクタの関係をしっかり理解することが重要です。

HTMLとCSSの関係を整理したい場合は、HTMLの基本と仕組みを理解するも参考になります。

CSSセレクタに関するよくある疑問

クラスセレクタとIDセレクタはどちらを使うべきですか？

CSSの装飾では、基本的にクラスセレクタを使うのがおすすめです。

IDセレクタは優先度が高く、同じIDをページ内で複数使わないというルールがあります。そのため、汎用的なスタイル指定には向いていません。

一方、クラスセレクタは複数の要素に使い回すことができ、CSSの管理もしやすくなります。

セレクタが効かない場合は何を確認すべきですか？

セレクタが効かない場合は、主に次の点を確認します。

  1. HTML側のクラス名やID名が正しいか
  2. CSS側のセレクタ名に誤字がないか
  3. CSSファイルが正しく読み込まれているか
  4. 他のCSSに上書きされていないか
  5. セレクタの優先順位で負けていないか

特に、クラス名のスペルミスやCSSの読み込み順はよくある原因です。

CSSセレクタは暗記する必要がありますか？

すべてを暗記する必要はありません。

最初は、要素セレクタ、クラスセレクタ、子孫セレクタ、疑似クラスを使えるようになれば、多くの基本的なスタイル指定に対応できます。

使いながら少しずつ覚えていくことが大切です。

まとめ

CSSセレクタとは、CSSでスタイルを適用する対象を指定するための書き方です。

要素セレクタ、クラスセレクタ、IDセレクタ、子孫セレクタ、属性セレクタ、疑似クラス、疑似要素など、さまざまな種類があります。

特に、Web制作ではクラスセレクタを中心に使うことが多く、管理しやすいCSSを書くためには、セレクタの使い分けが重要です。

セレクタを長くしすぎず、意味の分かるクラス名を付けることで、後から修正しやすいCSSになります。

CSSセレクタを理解すると、狙った要素に正しくスタイルを適用できるようになり、HTMLとCSSの関係もより分かりやすくなります。CSSの基礎を固めるうえで、まずしっかり押さえておきたい内容です。

関連記事

CSSの基本と仕組みを理解する｜見た目を制御する仕組みを体系的に解説

CSS設計とは？保守しやすいスタイルを書く基本を解説

BEMとは？CSS設計でよく使われる命名規則を解説

HTMLの基本と仕組みを理解する

CSSが反映されないときの原因と対処法まとめ