CSSセレクタ完全ガイド

1. セレクタとは？

CSSのセレクタとは、HTML要素を指定してスタイルを適用するためのルールです。適切なセレクタを使うことで、より効率的にデザインを適用できます。

2. 基本的なセレクタ

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

* {
    margin: 0;
    padding: 0;
}

対象: すべての要素に適用。

(2) 要素（タグ）セレクタ

p {
    color: blue;
}

対象: <p> タグすべて。

(3) クラスセレクタ（.）

.title {
    font-size: 20px;
}

対象: class="title" を持つすべての要素。

(4) IDセレクタ（#）

#header {
    background-color: gray;
}

対象: id="header" を持つ要素（1ページに1つが推奨）。

3. 詳細なセレクタ

(5) グループセレクタ（,）

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

対象: h1, h2, h3 のすべて。

(6) 子セレクタ（>）

.nav > li {
    list-style: none;
}

対象: .nav の直下にある li のみ。

(7) 子孫セレクタ（ スペース）

.nav li {
    color: red;
}

対象: .nav の中にあるすべての li。

(8) 兄弟セレクタ（+）

h1 + p {
    color: green;
}

対象: h1 の直後にある p。

(9) 一般兄弟セレクタ（~）

h1 ~ p {
    color: gray;
}

対象: h1 の後に続くすべての p。

4. 属性セレクタ

(10) 指定の属性を持つ要素（[attr]）

a[target] {
    color: red;
}

対象: target 属性を持つ a タグ。

(11) 特定の値を持つ要素（[attr="value"]）

a[target="_blank"] {
    color: blue;
}

対象: target="_blank" を持つ a タグ。

(12) 特定の文字列を含む（*=）

input[type*="text"] {
    background-color: yellow;
}

対象: type 属性に “text” を含む input 要素。

5. 疑似クラス・疑似要素

(13) 疑似クラス（:hover、:nth-child() など）

a:hover {
    text-decoration: underline;
}

対象: マウスホバー時の a。

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

対象: ul 内の2番目の li。

(14) 疑似要素（::before、::after）

h1::before {
    content: "★ ";
}

対象: h1 の前に “★” を追加。

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

対象: p の最初の文字を大きくする。

6. セレクタの優先度（詳細度）

CSSの優先順位

1. !important（最優先）
2. インラインスタイル（例: <p style="color: red;">）
3. IDセレクタ（#id）
4. クラス・属性・疑似クラス（.class、[attr]、:hover）
5. 要素セレクタ（div、p）
6. ユニバーサルセレクタ（*）

7. まとめ

• >（子セレクタ）や +（隣接セレクタ）などを使うと、不要な影響を防げる。
• nth-child() や ::before で柔軟なデザインが可能。
• セレクタの優先順位を理解しておくと、意図しないスタイルの上書きを防げる。

このガイドを活用して、CSSのセレクタをマスターしましょう！