CSSセレクタの書き方完全ガイド【初心者でも3分で理解できる】

Webサイトを作るとき、「この部分だけ色を変えたい」「特定の見出しだけフォントを大きくしたい」と思ったことはありませんか？

そんな時に使うのが「CSSセレクタ」です。CSSセレクタは、HTMLのどの部分にデザインを適用するかを指定するための仕組みで、Web制作には欠かせない基礎知識になります。

この記事では、CSSセレクタの基本から実践的な使い方まで、初心者の方にもわかりやすく解説していきます。

CSSセレクタとは？基本の3要素を理解しよう
基本的なセレクタの種類
実践的なセレクタの組み合わせ
知っておくと便利な擬似クラス
擬似要素でコンテンツを追加する
1. ::before（要素の前に追加）
2. ::after（要素の後に追加）
属性セレクタで細かく指定する
セレクタの優先順位（詳細度）
よくある間違いと解決法
まとめ

CSSセレクタとは？基本の3要素を理解しよう

CSSは、「セレクタ」「プロパティ」「値」の3つの要素で構成されています。

p {
  color: red;
}

この例を分解してみましょう。

セレクタ（Selector）

p の部分がセレクタです。「どの要素を変更するか」を指定します。この例では、すべてのp要素（段落タグ）を対象にしています。

プロパティ（Property）

color の部分がプロパティです。「何を変更するか」を指定します。この例では、文字色を変更しようとしています。

値（Value）

red の部分が値です。「どのように変更するか」を指定します。この例では、文字色を赤にしています。

つまり、上記のCSSは「p要素（セレクタ）の文字色（プロパティ）を赤色（値）にする」という意味になります。

基本的なセレクタの種類

CSSセレクタにはいくつかの種類があります。まずは、最も基本的で頻繁に使う5つのセレクタを見ていきましょう。

1. 要素型セレクタ（タグセレクタ）

HTMLタグの名前をそのまま書くだけの、最もシンプルなセレクタです。「要素セレクタ」や「タグセレクタ」とも呼ばれます。

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

div {
  background-color: #f0f0f0;
}

HTML例：

<h1>これは見出しです</h1>
<p>これは段落です</p>
<div>これはdiv要素です</div>

この場合、ページ内のすべてのh1要素が青色になり、すべてのp要素のフォントサイズが16pxになります。

使いどころ：
ページ全体で共通のスタイルを設定したいときに便利です。ただし、すべての同じタグに適用されるため、特定の一部だけスタイルを変えたい場合には向いていません。

2. クラスセレクタ

クラス名を使って要素を指定するセレクタです。セレクタ名の前に .（ドット） を付けます。

実務で最もよく使われるセレクタで、柔軟に要素を指定できます。

.important {
  color: red;
  font-weight: bold;
}

.box {
  padding: 20px;
  border: 1px solid #ccc;
}

HTML例：

<p class="important">これは重要な段落です</p>
<p>これは普通の段落です</p>
<div class="box">これはボックスです</div>

クラスセレクタの特徴は、同じクラス名を複数の要素に使えることです。上記の例では、.important というクラスをp要素にもdiv要素にも使えます。

<p class="important">重要な段落</p>
<div class="important">重要なdiv</div>
<span class="important">重要なspan</span>

これらすべてが赤い太字で表示されます。

3. IDセレクタ

ID名を使って要素を指定するセレクタです。セレクタ名の前に #（シャープ） を付けます。

#header {
  background-color: navy;
  color: white;
}

#main-content {
  width: 80%;
  margin: 0 auto;
}

HTML例：

<div id="header">ヘッダー部分</div>
<div id="main-content">メインコンテンツ</div>

重要な注意点：
ID名は、1つのHTMLページ内で1回しか使えません。以下のような使い方はNGです。

<!-- これはダメ！ -->
<div id="box">ボックス1</div>
<div id="box">ボックス2</div>

複数の要素に同じスタイルを適用したい場合は、クラスセレクタを使いましょう。

クラスとIDの使い分け：

クラス: 複数回使える、柔軟な使い方ができる
ID: 1回だけ使える、ページ内リンクやJavaScriptでの操作にも使われる

4. 全称セレクタ（ユニバーサルセレクタ）

すべての要素に対してスタイルを適用したいときに使います。*（アスタリスク） で表します。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

この例は、ページ内のすべての要素の余白をリセットしています。CSS初期化（CSSリセット）でよく使われます。

注意点：
すべての要素に適用されるため、パフォーマンスへの影響を考慮して使う必要があります。多用は避けましょう。

5. グループ化セレクタ

複数のセレクタに同じスタイルを適用したい場合、カンマで区切って並べます。

h1, h2, h3 {
  color: navy;
  font-family: "メイリオ", sans-serif;
}

.btn, .button, #submit-btn {
  padding: 10px 20px;
  border-radius: 5px;
}

HTML例：

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

すべての見出しが紺色の同じフォントで表示されます。

カンマの前後にスペースを入れたり、改行したりしても問題ありません。読みやすい形で書きましょう。

h1,
h2,
h3 {
  color: navy;
}

実践的なセレクタの組み合わせ

基本的なセレクタをマスターしたら、次は複数のセレクタを組み合わせた、より実践的な指定方法を見ていきましょう。

子孫セレクタ（スペース区切り）

「◯◯の中にある△△」という指定ができます。セレクタとセレクタの間に半角スペースを入れます。

div p {
  color: blue;
}

.container h2 {
  font-size: 24px;
}

HTML例：

<p>これは青くならない</p>

<div>
  <p>これは青くなる</p>
  <section>
    <p>これも青くなる（孫要素でもOK）</p>
  </section>
</div>

div要素の中にあるp要素（子要素だけでなく孫要素以降も含む）がすべて青色になります。

子セレクタ（>で区切り）

「◯◯の直下にある△△」という指定ができます。子孫セレクタとの違いは、1階層下の子要素のみが対象になることです。

div > p {
  color: red;
}

HTML例：

<div>
  <p>これは赤くなる（直下の子要素）</p>
  <section>
    <p>これは赤くならない（孫要素）</p>
  </section>
</div>

孫要素以降は対象外になります。

子孫セレクタと子セレクタの違い：

子孫セレクタ（スペース）: すべての下層要素が対象
子セレクタ（>）: 1階層下の子要素のみが対象

隣接兄弟セレクタ（+で区切り）

「◯◯の直後にある△△」という指定ができます。同じ階層にあるすぐ隣の要素のみが対象です。

h2 + p {
  font-size: 18px;
  font-weight: bold;
}

HTML例：

<h2>見出し</h2>
<p>これだけ大きく太字になる</p>
<p>これは通常のまま</p>

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

実用例：
見出しの直後の段落だけを目立たせたい（リード文として扱う）場合などに便利です。

一般兄弟セレクタ（~で区切り）

「◯◯の後ろにある△△すべて」という指定ができます。隣接兄弟セレクタとの違いは、直後だけでなく、後ろにある要素すべてが対象になることです。

h2 ~ p {
  color: gray;
}

HTML例：

<p>これは変わらない（h2より前）</p>
<h2>見出し</h2>
<p>これはグレーになる</p>
<div>他の要素</div>
<p>これもグレーになる</p>

h2より後ろにあるp要素すべてがグレーになります。

複合セレクタ（スペースなしで繋げる）

複数の条件を同時に満たす要素を指定できます。

p.important {
  color: red;
}

div.box.large {
  width: 500px;
}

HTML例：

<p class="important">これは赤くなる</p>
<div class="important">これは変わらない</div>

<div class="box large">これは幅500pxになる</div>
<div class="box">これは変わらない</div>

p.important は「p要素でかつimportantクラスを持つ要素」という意味になります。

注意点：
要素セレクタ同士は繋げられません。h1h2 のような書き方はエラーになります。

知っておくと便利な擬似クラス

擬似クラスは、要素の特定の状態を指定できるセレクタです。セレクタの後ろに :（コロン） を付けて書きます。

:hover（マウスオーバー時）

マウスカーソルが要素の上に乗ったときのスタイルを指定できます。

a:hover {
  color: red;
  text-decoration: underline;
}

.button:hover {
  background-color: #0056b3;
}

リンクやボタンのインタラクションを作るときに欠かせません。

:first-child（最初の子要素）

親要素の中で最初の子要素に対してスタイルを適用します。

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

HTML例：

<ul>
  <li>これだけ太字になる</li>
  <li>通常の太さ</li>
  <li>通常の太さ</li>
</ul>

よくある間違い：
「最初に出てくるli」ではなく、「親要素の最初の子要素がli」という意味です。

<div>
  <p>段落</p>
  <li>これは太字にならない（最初の子要素ではない）</li>
</div>

:last-child（最後の子要素）

親要素の中で最後の子要素に対してスタイルを適用します。

li:last-child {
  border-bottom: none;
}

リストの最後の項目だけ区切り線を消したい、といった場合に便利です。

:nth-child(n)（n番目の子要素）

n番目の子要素を指定できます。

li:nth-child(2) {
  color: blue;
}

tr:nth-child(odd) {
  background-color: #f0f0f0;
}

tr:nth-child(even) {
  background-color: white;
}

便利な使い方：

odd: 奇数番目の要素
even: 偶数番目の要素
2n: 2の倍数番目（2, 4, 6…）
3n+1: 3の倍数+1番目（1, 4, 7, 10…）

テーブルの行を交互に色分けする「ストライプ」などによく使われます。

:not（否定）

特定の条件に当てはまらない要素を指定できます。

p:not(.special) {
  color: gray;
}

HTML例：

<p>グレーになる</p>
<p class="special">通常の色のまま</p>
<p>グレーになる</p>

specialクラスを持たないp要素だけがグレーになります。

擬似要素でコンテンツを追加する

擬似要素は、実際にはHTMLに存在しない要素を作り出せます。セレクタの後ろに ::（ダブルコロン） を付けて書きます。

::before（要素の前に追加）

要素の内容の前に何かを追加できます。

h2::before {
  content: "★ ";
  color: gold;
}

HTML例：

<h2>見出し</h2>

表示結果：

★ 見出し

::after（要素の後に追加）

要素の内容の後に何かを追加できます。

a::after {
  content: " →";
  color: blue;
}

HTML例：

<a href="#">リンク</a>

表示結果：

リンク →

実用例：

リンクの前にアイコンを付ける
引用符を自動で追加する
必須項目に「*」マークを付ける

注意点：
contentプロパティは必須です。contentを指定しないと、何も表示されません。

/* これは何も表示されない */
h2::before {
  color: red;
}

/* contentが必要 */
h2::before {
  content: "";
  color: red;
}

属性セレクタで細かく指定する

HTML要素が持つ属性を使って、より細かくスタイルを指定できます。

[属性名]（属性を持つ要素）

特定の属性を持つ要素を指定します。

a[target] {
  background-color: yellow;
}

HTML例：

<a href="#">普通のリンク</a>
<a href="#" target="_blank">黄色い背景のリンク</a>

target属性を持つリンクだけが黄色い背景になります。

[属性名=”値”]（属性の値が完全一致）

属性の値が完全に一致する要素を指定します。

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

input[type="password"] {
  border: 1px solid red;
}

テキスト入力欄とパスワード入力欄で、異なるスタイルを適用できます。

[属性名^=”値”]（値で始まる）

属性の値が特定の文字列で始まる要素を指定します。

a[href^="https"] {
  color: green;
}

httpsで始まるURLのリンクだけ緑色になります。

[属性名$=”値”]（値で終わる）

属性の値が特定の文字列で終わる要素を指定します。

a[href$=".pdf"] {
  background: url(pdf-icon.png) no-repeat;
  padding-left: 20px;
}

PDFファイルへのリンクにアイコンを自動で付けられます。

[属性名*=”値”]（値を含む）

属性の値に特定の文字列を含む要素を指定します。

a[href*="youtube"] {
  color: red;
}

URLにyoutubeという文字が含まれるリンクだけ赤色になります。

セレクタの優先順位（詳細度）

同じ要素に複数のCSSルールが適用される場合、どのスタイルが優先されるかは「詳細度（specificity）」によって決まります。

優先順位（高い順）：

インラインスタイル（HTML内に直接書く）
IDセレクタ
クラスセレクタ、属性セレクタ、擬似クラス
要素型セレクタ、擬似要素
全称セレクタ

具体例：

/* 優先順位：低 */
p {
  color: black;
}

/* 優先順位：中 */
.text {
  color: blue;
}

/* 優先順位：高 */
#special {
  color: red;
}

<p class="text" id="special">この文字は何色？</p>

この場合、最も詳細度の高いIDセレクタが優先されて、文字は赤色になります。

複数のセレクタを組み合わせた場合：

div p {
  color: blue;
}

.container p {
  color: green;
}

この場合、クラスセレクタの方が詳細度が高いため、緑色になります。

よくある間違いと解決法

1. スペースの有無で意味が変わる

/* div要素でかつboxクラスを持つ要素 */
div.box {
  background: blue;
}

/* div要素の中のboxクラス要素 */
div .box {
  background: red;
}

スペースがあるかないかで、全く違う意味になります。

2. セレクタの終わりにカンマを付けてはいけない

/* これはエラー */
h1,
h2,
h3, {
  color: blue;
}

/* 正しい書き方 */
h1,
h2,
h3 {
  color: blue;
}

最後のセレクタの後にカンマがあるとエラーになります。

3. 擬似クラスと擬似要素のコロンの数

/* 擬似クラスは1つ */
a:hover {
  color: red;
}

/* 擬似要素は2つ */
p::before {
  content: "※";
}

擬似クラスは :（シングルコロン）、擬似要素は ::（ダブルコロン） です。

ただし、古いブラウザとの互換性のため、擬似要素も :（シングルコロン） で書くこともできます。

まとめ

CSSセレクタの書き方について、基本から実践的な内容まで解説してきました。

最初に覚えるべき基本セレクタ：

要素型セレクタ：p { }
クラスセレクタ：.class { }
IDセレクタ：#id { }
グループ化：h1, h2 { }

よく使う組み合わせ：

子孫セレクタ：div p { }
子セレクタ：div > p { }
隣接兄弟：h2 + p { }

便利な擬似クラス：

:hover
:first-child
:last-child
:nth-child()

セレクタは種類が多くて最初は戸惑うかもしれませんが、基本的なものから順番に覚えていけば大丈夫です。

実際にコードを書きながら試してみることで、自然と使いこなせるようになりますよ。

CSSセレクタとは？基本の3要素を理解しよう

基本的なセレクタの種類

1. 要素型セレクタ（タグセレクタ）

2. クラスセレクタ

3. IDセレクタ

4. 全称セレクタ（ユニバーサルセレクタ）

5. グループ化セレクタ

実践的なセレクタの組み合わせ

子孫セレクタ（スペース区切り）

子セレクタ（>で区切り）

隣接兄弟セレクタ（+で区切り）

一般兄弟セレクタ（~で区切り）

複合セレクタ（スペースなしで繋げる）

知っておくと便利な擬似クラス

:hover（マウスオーバー時）

:first-child（最初の子要素）

:last-child（最後の子要素）

:nth-child(n)（n番目の子要素）

:not（否定）

擬似要素でコンテンツを追加する

::before（要素の前に追加）

::after（要素の後に追加）

属性セレクタで細かく指定する

[属性名]（属性を持つ要素）

[属性名=”値”]（属性の値が完全一致）

[属性名^=”値”]（値で始まる）

[属性名$=”値”]（値で終わる）

[属性名*=”値”]（値を含む）

セレクタの優先順位（詳細度）

よくある間違いと解決法

1. スペースの有無で意味が変わる

2. セレクタの終わりにカンマを付けてはいけない

3. 擬似クラスと擬似要素のコロンの数

まとめ

Youtube

カテゴリー別人気記事

コメント