【CSS】セレクタの種類一覧と使い方を徹底解説_Webの基礎

CSSセレクターとは、WebページのHTMLやXML文書内で、「どの要素に対してスタイル（デザインやレイアウトなど）を適用するか」を指定するためのパターンです。

はじめに

CSSを書くうえで最も重要なのが「セレクタ」です。

セレクタを理解していれば、

• 特定の要素だけデザインを変更
• HTMLを効率的に装飾
• 複雑なレイアウトにも対応

できるようになります。

この記事では、CSSでよく使うセレクタを基礎から応用まで、サンプルコード付きでわかりやすく解説します。

CSSセレクタとは？

CSSのセレクタとは「どのHTML要素にスタイルを適用するか指定する仕組み」です。

例えば次のコードを見てみましょう。

p {
    color: red;
}

このコードでつぎのような HTML の

<p>文字は赤色になります</p>

すべての <p> タグにスタイルが適用されます。

CSSセレクタの種類

1. 基本セレクタ (Basic Selectors)

Web制作のベースとなる、最も頻繁に使用するセレクタです。

要素セレクタ

HTMLタグ名を指定する最も基本的なセレクタです。

CSS

h2 {
    color: blue;
}

HTML

<h2>見出し</h2>

結果

全ての h2 見出しが青色になります。

クラスセレクタ

複数の要素に同じスタイルを適用できます。

HTML

<p class="important">重要な文章</p>

CSS

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

結果

重要な文章

クラスは何回でも使用できます。

IDセレクタ

特定の1つの要素を指定します。

HTML

<h1 id="main-title">ページタイトル</h1>

CSS

#main-title {
    color: green;
}

結果

ページタイトルの色が 青色 になります。

1ページ内で同じIDは基本的に1回だけ使用します。

ユニバーサルセレクタ（*）

すべての要素を対象にします。

* {
    margin: 0;
    padding: 0;
}

CSSリセットでよく利用されます。

2. 結合セレクタ (Combinators)

HTMLの親子関係や、兄弟関係（並び順）の位置関係を使って指定するセレクタです。

子孫セレクタ（半角スペース）

特定要素の中にある要素を指定します。

HTML

<div class="box">
    <p>対象</p>
</div>

CSS

.box p {
    color: red;
}

子セレクタ（>）

直下の子要素のみ対象です。

.box > p {
    color: blue;
}

隣接セレクタ（+）

直後にある要素のみ対象です。

HTML

<h2>見出し</h2>
<p>説明文</p>

CSS

h2 + p {
    color: red;
}

兄弟セレクタ（~）

同じ親要素内の後続要素を指定します。

h2 ~ p {
    color: blue;
}

3. 属性セレクタ (Attribute Selectors)

HTMLタグ内の href や type、target などの「属性」の状態に合わせて指定するセレクタです。

属性セレクタ

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

属性が存在

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

属性値が一致

input[type="text"] {
    background: #ffffcc;
}

4. 擬似クラス (Pseudo-classes)

要素の「特定の状態」や「記述された順番（構造）」を指定するセレクタです。

擬似クラスとは？

擬似クラスは要素の状態によってスタイルを変更する仕組みです。

:hover

マウスポインタが要素（aタグ）に乗っているときの色変更です。

a:hover {
    color: red;
}

要素（ボタン）にマウスポインターが乗ったときのスタイルを変更します。

button:hover {
    background: blue;
    color: white;
}

:active

要素（ボタン）がクリック・画面タップ中のスタイルを変更します。

button:active {
    transform: scale(0.95);
}

:focus

入力欄を選択した時のスタイルを設定します。

input:focus {
    border-color: blue;
}

:checked

チェックボックス選択時のスタイルを設定します。

input:checked {
    accent-color: green;
}

:disabled

無効状態のときのスタイル設定です。

input:disabled {
    background: #eee;
}

:first-child

リストの最初の子要素のスタイルを設定します。

li:first-child {
    color: red;
}

:last-child

リスト最後の子要素にスタイルを設定します。

li:last-child {
    color: blue;
}

:nth-child()

リストの指定した順番（3番目）を対象にスタイルを設定します。

li:nth-child(3) {
    color: red;
}

tr は Table Row（テーブル・ロウ） の略です。テーブルの偶数行だけにスタイルを設定します。

tr:nth-child(even) {
    background: #f5f5f5;
}

次は、テーブルの奇数行だけにスタイルを設定します。

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

:not()

条件から除外するときに使います。
次の例は、importantクラス以外を対象にスタイルを設定しています。

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

5. 擬似要素 (Pseudo-elements)

擬似クラスと似ていますが、要素の特定の部分を切り出したり、HTMLにない架空の要素をCSS側から追加するセレクタです。

::before

要素のコンテンツの直前に “★” を追加装飾します。

.notice::before {
    content: "★";
}

要素のコンテンツは「お知らせ」なら「★お知らせ」と表示されます。

::after

こちらは、要素のコンテンツの直後に “！” を追加装飾します。

.notice::after {
    content: "！";
}

要素のコンテンツは「お知らせ」なら「お知らせ！」と表示されます。

::first-letter

p 文字列要素の先頭文字だけ大きくします。

p::first-letter {
    font-size: 2em;
}

先頭文字のフォントサイズだけ 2em にして表示します。

擬似要素と疑似クラスの違い

よく混同されるので注意しましょう。

セレクタの優先順位（重要）

CSSが効かない原因の多くが優先順位の誤りによるものです。

優先順位は以下の順です。

!important
　↓
IDセレクタ
　↓
クラス・属性・擬似クラスセレクタ
　↓
要素セレクタ

例：

p {
    color: blue;
}

.text {
    color: red;
}

この場合、要素セレクタpよりクラスセレクタ.textが優先されるため「赤」になります。

グループ化セレクタ

セレクターリストはセレクターのカンマ区切りのリストです。複数の要素に同じスタイルを適用します。

h1,
h2,
h3 {
    color: navy;
}

異なる基準で一致する要素に同じスタイルを適用するときは、セレクターをカンマ区切りのリストにまとめると、一貫性が得られると同時にスタイルシートの容量も削減できます。

セレクターリストを使用する欠点は、セレクターリスト内に未対応のセレクターが一つでもあった場合に、ルール全体が無効化されてしまうことです。

おわりに (まとめ)

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

サンプルのダウンロードはこちらから

【Excel VBA】サンプルファイル_ダウンロードのページ ・最新の登録データが一番上になっています。・目次クリックでジャンプできますのでご利用ください。 ダウンロード一覧（1/7ページ目）新しい登録順です 記事ごとに使っ…