CSSセレクタとは？まずは基本をおさらいしよう
CSSセレクタとは、「どのHTML要素にスタイルを適用するのか」を指定するためのルールです。
HTMLが「骨組み（構造）」、CSSが「見た目（デザイン）」を担当するのは知っている方も多いと思いますが、CSSセレクタをうまく使いこなせるかどうかで、コーディングの効率も、デザインの表現力も大きく変わります。
たとえば、次のようなコードはCSSの定番スタイルです。
p {
color: red;
}
これは「すべての <p> タグを赤色にする」という意味ですが、実際のWeb制作ではもっと細かく指定したい場面が多く存在します。
- 特定のエリアの見出しだけ色を変えたい
- ボタンの2つ目だけデザインを変えたい
- マウスを重ねたときだけ影をつけたい
- 特定の属性を持つフォームだけ装飾したい
こうしたことを実現するのが、CSSセレクタ＋疑似クラス＋疑似要素です。
この記事では、基本〜応用までを網羅しつつ、「知らなかった！」と思える便利テクニックまで丁寧に紹介します。
基本のCSSセレクタ（おさらい）
初心者がまず覚えるべき基本セレクタをサクッと整理しておきます。ここが曖昧だと、応用編で混乱してしまうこともあるので一度確認しておきましょう。
| セレクタ | 書き方 | 意味 |
|---|---|---|
| 要素セレクタ | p {} | HTMLタグ名そのもの |
| クラスセレクタ | .title {} | 同じデザインを複数に使いたい場合 |
| IDセレクタ | #header {} | ページ内で1つだけに使う要素 |
| 全称セレクタ | * {} | すべての要素に適用 |
| 子孫セレクタ | div p {} | divの中にある p すべて |
基本の例：
/* すべての段落を赤く */
p {
color: red;
}
/* .infoクラス内のpタグだけ青に */
.info p {
color: blue;
}
/* id="main" のみ適用 */
#main {
max-width: 1200px;
margin: 0 auto;
}
ここまでは多くの人が使える内容です。ですがここで止まってしまっていると、CSSの表現力はまだ半分程度しか使えていません。
子セレクタ・隣接セレクタ・兄弟セレクタの違いを理解する
CSSセレクタの中でも、特に使い分けがわかりにくいのが 「子孫」「子」「兄弟」 の３つです。似ているように見えて、適用範囲や優先度が大きく異なるため、ここを理解するとCSSの精度がグッと上がります。
子孫セレクタ（半角スペース）
親 要素 {
/* 適用 */
}
もっとも基本的なセレクタ。
親要素の中に含まれているすべての子要素（階層に関係なく）にスタイルを適用します。
section p {
color: #555;
}
<section>の直下でなくても、さらに入れ子になっていても適用されます- とても便利ですが、範囲が広すぎて「意図しない場所までスタイルが当たる」こともあるので注意
子セレクタ（ > ）
親 > 子 {
/* 直下の要素だけに適用 */
}
**「1階層だけ下の要素」**に限定してスタイルを当てたいときに使います。
ul > li {
list-style: none;
}
✔ 子だけに適用されるので、入れ子になったli（孫要素）には適用されません。
✔ 子孫セレクタよりもピンポイントに指定できる＝余計な影響が出にくい。
隣接兄弟セレクタ（ + ）
A + B {
/* 要素Aの「すぐ後ろ」にあるBだけ */
}
これも知られていないけれど便利なセレクタ。
例：見出しの直後の段落だけ太字にしたい。
h2 + p {
font-weight: bold;
}
✔ 「Aのすぐ隣にあるB」だけにスタイルが当たります
✔ 1つ飛ばしや2番目以降は対象外になります
一般兄弟セレクタ（ ~ ）
A ~ B {
/* Aの後ろにあるすべてのB */
}
隣接セレクタとは違い、間に要素があってもかまいません。
h2 ~ p {
color: #666;
}
✔ <h2> の後にあるすべての <p> に適用される
✔ 「ある要素以降にある○○」といった指定に便利です
3つのセレクタの違いまとめ
| セレクタ | 書き方 | 意味 | 適用範囲 |
|---|---|---|---|
| 子孫 | A B | Aの中にあるすべてのB | 広い（深さ問わず） |
| 子 | A > B | Aの直下のBだけ | 1階層のみ |
| 隣接兄弟 | A + B | Aのすぐ後ろのB | 限定的 |
| 一般兄弟 | A ~ B | Aの後ろにあるBすべて | 比較的広い |
次は、**「:hover だけじゃない！疑似クラスの世界」**に進みます。:nth-child() や :not()、フォームの状態に応じたセレクタなども解説していきますね。
疑似クラス：hoverだけじゃない、CSSで指定できる「状態」の世界
疑似クラス（pseudo-classes）は、要素の状態や条件によってスタイルを変えたいときに使うCSSの仕組みです。:hover はよく知られていますが、実はそれ以外にも便利なものがたくさんあります。
よく使う疑似クラス3つ（基本編）
a:hover {
color: red;
}
input:focus {
outline: 2px solid #007bff;
}
button:active {
transform: scale(0.98);
}
| 疑似クラス | 使う場面 |
|---|---|
:hover | マウスを乗せたとき |
:focus | フォーム要素にカーソルが入ったとき |
:active | クリックして押されている間 |
:nth-child() と :nth-of-type()（表・リストで大活躍）
偶数行に背景色をつけたい、2つおきにデザインを変えたい――そんな場合に使えるのがこれです。
/* 奇数行（1,3,5…）だけ */
li:nth-child(odd) {
background: #f9f9f9;
}
/* 偶数行（2,4,6…）だけ */
li:nth-child(even) {
background: #fff;
}
/* 3つおき */
li:nth-child(3n) {
color: #999;
}
また、タグの種類を指定して判断したい場合は nth-of-type() を使います。
p:nth-of-type(2) {
font-weight: bold;
}
:not() —「それ以外を指定する」便利な否定セレクタ
指定した要素以外にスタイルを適用したいときに使うセレクタです。
/* 全てのliのうち、.active以外をグレーに */
li:not(.active) {
color: #888;
}
実務では例えば：
/* 最後以外のliに区切り線 */
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
フォームで使える状態系セレクタ
フォームの状態に応じたデザインがCSSだけで可能になります。
input:disabled {
background: #f5f5f5;
}
input:checked + label {
font-weight: bold;
color: #007bff;
}
✔ JavaScriptなしで「チェックされたら文字を変える」といったUIが作れるのもポイントです。
疑似要素 ::before / ::after — contentで装飾を入れる方法
疑似要素は、実際のHTML要素には存在しない**「仮想の要素」**を作り、そこに装飾を加える機能です。
基本形
.box::before {
content: "★";
color: orange;
margin-right: 4px;
}
.box::after {
content: "";
display: block;
width: 50px;
height: 2px;
background: #ddd;
}
▶ content: "" を書かないと描画されません（これを忘れる人が多い！）
▶ 装飾・アイコン・吹き出し・マーカーなどに使われます。
属性セレクタ [ ] — type=”text” だけじゃない！
input[type="text"] のような書き方は有名ですが、実はCSSではあらゆるHTML属性を指定してスタイルを変えることができます。
基本の属性セレクタ
| 書き方 | 例 | 指定できる要素 |
|---|---|---|
[属性名] | input[required] | required属性を持つ要素 |
[属性="値"] | a[target="_blank"] | 属性が完全一致 |
^= 前方一致 | a[href^="https"] | httpsで始まるリンク |
$= 後方一致 | img[src$=".png"] | .pngで終わる画像 |
*= 部分一致 | a[href*="example"] | exampleを含むURL |
/* メール入力欄だけデザイン変更 */
input[type="email"] {
border-color: #007bff;
}
/* PDFリンクだけアイコン表示 */
a[href$=".pdf"]::after {
content: "📎";
margin-left: 4px;
}
実用CSSミニテクニック集（コピペOK）
ここからは、今まで紹介したセレクタ・疑似クラス・疑似要素を「実際のデザインでどう使うか？」にフォーカスして紹介します。
● li要素の間だけ区切り線を入れる（最後は入れない）
li:not(:last-child) {
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
margin-bottom: 8px;
}
✔ 一覧のデザインでよく使われるパターン
✔ HTMLを増やさずに線だけを付けられる
● 隣接セレクタで「li＋li」にだけ左線を入れる
li + li {
border-left: 1px solid #ddd;
padding-left: 8px;
}
✔ グローバルナビメニューなどで便利
✔ 最初の要素には線を付けず、それ以降だけ装飾
● nth-childで「偶数行・奇数行の背景色切り替え」
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
✔ テーブルやカードレイアウトで見やすさアップ
✔ JavaScript不要でストライプデザイン
● ::beforeで見出しにアクセントライン
h2 {
position: relative;
padding-left: 16px;
}
h2::before {
content: "";
width: 6px;
height: 100%;
background: #333;
position: absolute;
left: 0;
top: 0;
}
✔ HTMLを汚さず装飾できる
✔ デザインカンプでよく出る“縦のライン”を簡単実装
input:checked + label でチェック時のUIを作る
<input type="checkbox" id="check1"> <label for="check1">チェックされると文字が変わる</label>
input:checked + label {
color: #007bff;
font-weight: bold;
}
✔ JavaScriptなしで「クリックしたら変化するUI」
✔ ラジオボタン・チェックボックスのカスタマイズにも応用可能
まとめ：CSSセレクタを使いこなせれば、デザインの幅は一気に広がる
CSSセレクタは、ただの装飾ではなく、**「デザインルールを効率よく・正確に適用する技術」**です。
この記事で紹介したように：
>や+などのセレクタで細かく要素を指定できる:hover以外にもたくさんの疑似クラスがある::before/::afterを使えばHTMLを増やさず装飾できる:not()や[属性]で条件付きのスタイリングが可能
こうした知識を理解すれば、クラス名を増やしすぎず、シンプルで保守しやすいCSSを書くことができます。