ウェブ制作
コーディング
【CSS入門】
セレクター（指定方法）の基本を
わかりやすく解説！
そらまめ@プログラマー
2025.11.04
#Oookey_blog_021
Share on
こんにちは！プログラマーのそらまめです。
Webデザインでスタイルを指定するとき、「どの要素にCSSを当てるか？」を決めるのがセレクターです。
セレクターを理解すると、見た目の調整だけでなく、HTML構造を意識したスマートなコーディングができるようになります。
この記事では、HTMLの構造を的確に捉えるためのセレクターの使い方を、基本から応用まで丁寧に解説します。
1.セレクターとは？
一言で言えば、「CSSで装飾を適用する対象（HTML要素）を指定するための仕組み」です。
Copied!
p{
color: red;
}
上記の例ではpがセレクターで、「p要素すべてを赤字にする」という意味になります。
CSSではセレクターを組み合わせることで、ページ全体の見た目を柔軟にコントロールできます。
では、このセレクターにはどんな種類があるのかについて次で解説いたします。
2.基本的なセレクター5選
セレクターにも色々種類があるので、ここでは基本的なセレクターについて解説します。
要素セレクター
HTMLタグ名そのものを指定します。
「タグ名{}」で指定できます。
Copied!
p{ /* pタグ全てに適用 */
color: blue;
}クラスセレクター
クラス属性(class)を指定します。
クラスはHTMLの要素に対して、私たちが任意で付けられます。
<div class=”oookey”></div>のようにclass=”クラス名”で名前を付けられ、
「.クラス名{}」で指定できます。
Copied!
.oookey{ /* <div class=”oookey”></div>などに対して適用 */
background-color: #ffffff;
}IDセレクター
ID属性(id)を指定します。
クラスと同じく、私たちが任意でHTMLの要素に対して設定できます。
ただし、HTML上では相違点がかなりあるので注意が必要です。
「#ID名{}」で指定できます。
Copied!
#contents{ /* <section id=”contents”></section>などに対して適用。 */
background-color: #ffffff;
}
※クラスとIDの違い
似た属性なのですが、実は大きく違います。下記を参考に使い分けてください！
①同じ属性名を設定
class: 1つのHTML文章内で、同じ属性名を何回でも設定できる
id: 1つのHTML文章内で、同じ属性名を設定できない
OK |
NG |
|---|
②設定できる数
class: 半角スペースを使用し、複数のクラスを設定可能
id: 複数のクラスを設定できない
OK |
NG |
|---|
全称セレクター
全ての要素を対象にします。
「*{}」で指定できます。
「クラス名 *」でクラス配下の全てを指定することもできます。
Copied!
*,
*::before,
*::after { box-sizing: border-box; }
.oookey *{
color: red;
}グループ化（複数指定）
複数のセレクターに同じスタイルをまとめて適用します。
「,」で区切ることで指定できます。
Copied!
h1, h2, h3 { /* h1タグh2タグh3タグ全てにfont-familyがかかる */
font-family: "Noto Sans JP";
}3. 応用セレクターとその違い
ここからは、HTMLの階層構造を意識して指定する方法です。
子孫結合子「半角スペース」
ある要素内にあるすべての子孫要素を対象にします。
半角スペースを開けることで指定できます。
Copied!
div p { /* div の中にあるすべての p に適用 */
color: gray;
}子結合子「>」
直下の子要素だけを対象にします。
「親要素 > 子要素」で指定できます。
Copied!
div > p { /* div 直下の p のみに適用 */
color: blue;
}隣接兄弟結合子「+」
A + B は「A の直後にある兄弟要素 B」にだけマッチします。（親子関係は不可）
「兄弟要素A + 直後の兄弟要素B」で指定できます。
Copied!
h2 + p {
margin-top: 0;
}
/* <h2></h2><p>ここが適用される</p><p>ここは適用されない</p> */
/* 指定した要素のすぐ後ろのpタグのみ適用 */後続兄弟結合子「~」
指定した要素の後に続くすべての兄弟要素を対象にします。
Copied!
.element ~ div {
color: gray;
}Copied!
<div class="element">このクラスを基準に指定します！</div>
<div>指定される
<div>ここは指定されない</div>
</div>
<div>指定される</div>
<div>指定される</div>
<p>ここは指定されない</p>
/* このように指定した要素に続く全てのdivに適用され、続く要素の中の要素に対しては指定されない */複合セレクター
両方のセレクターを同時に満たす要素に適用されます。
「要素.属性名」で指定可能です。
Copied!
h2.oookey { /* <h2 class=”oookey”></h2> 要素がh2かつ、属性名がoookeyの要素に適用されます */
color: red;
}4. 疑似クラス・疑似要素
疑似クラス（状態や構造を指定）
ユーザーの操作や位置に応じて動的にスタイルを変えることができます。
基本
「:hover」でホバー時のスタイルを変更
Copied!
a:hover { /* ホバー時に色を変更 */
color: red;
}構造系
複数ある要素に対して、任意の要素を指定できます。
数がかなりあるので、1つ1つご自分で試しながら学ぶことをお勧めします。
Copied!
:first-child { } /* 一番最初の要素 */
:last-child { } /* 一番最後の要素 */
:nth-child(2n) { } /* 偶数番目 */
:nth-of-type(3) { } /* 同じ要素の中で3番目 */
:nth-child(odd) { } /* 奇数番目の要素 */
:nth-child(2n+1) { } /* 奇数番目の要素 */
:nth-child(even) { } /* 偶数番目の要素 */
:nth-child(2n) { } /* 偶数番目の要素 */
:nth-child(3n) { } /* 3の倍数番目の要素 */
:nth-child(n+6) { } /* 6番目以降の要素 */
:nth-child(-n+5) { } /* 5番目までの要素 */
:nth-child(3n+2) { } /* 2番目~3番目までの要素 */
:nth-last-child(1) { } /* 後ろから1番目 */
:nth-last-of-type(2) { } /* 同じ要素の後ろから2番目 */
:only-child { } /* 子が1つだけの場合 */
:only-of-type { } /* 同じタグが1つだけの場合 */→div.li:last-child{}であれば、div要素内の子要素のliの中で一番最後の要素が指定される
※:nth-of-type()とnth-childの違いについて
nth-childは、親要素から数えて、n番目の要素を指定します。
要素の種類が違ったとしても、上から順番に数えたものが指定されます。
対して、nth-of-typeは指定した要素のみを数えます。
以下の場合、element p:nth-of-type(2)で指定するとp要素2が指定されます。
しかし、element p:nth-child(2)を指定するとp要素1が指定されます。
Copied!
<div class="element">
<h1>h1要素</h1>
<p>p要素1</p> /* element p:nth-child(2)の場合 */
<p>p要素2</p> /* element p:nth-of-type(2)の場合 */
<p>p要素3</p>
</div>言語・属性関連
日本語ページだけにフォントを適用できます。
Copied!
:lang(ja) { font-family: "Noto Sans JP"; }条件系
任意の条件に合致した要素を指定できます。
Copied!
:not(.active) { opacity: 0.5; } /* active以外に適用 */
:is(h1, h2, h3):hover { color: navy; }. /* グルーピングを簡潔に（優先度中） */
:where(p, li) { line-height: 1.6; } /* is()と似てるが優先度が低い */
:has(img) { border: 1px solid #ccc; } /* 子要素にimgがある場合に適用（新仕様） */
:empty /* 中身が空の要素 */
:checked /* チェックされたinput */
:focus /* フォーカス中の要素 */
:disabled / :enabled /* 操作可否状態 */
→:not は「この条件に当てはまらない要素」を選びます。
例でいうと、div :not(p) は div 内の p 以外の要素、div:not(:has(p)) は子に p を持たない div を指定します。
:hasは~の要素を持つ親要素に対して指定できます。div:has(p)と指定した場合は、子要素にpタグを持つ、div要素に適用されます。
isの使い道としては、h1:hover,h2:hover,h3:hoverと指定してたものを上記のように簡潔に指定できます。
whereはこの後出てくる優先度に関わります。
hasより下のempty,checked,focus,disabledはお問い合わせフォームなどで活躍すると思います。
疑似要素（見た目を追加）
HTMLを直接いじらずに要素を「擬似的に追加」します。
Copied!
p::before { /* pタグの前側に星が現れます。 */
content: "★";
color: gold;
}
p::after { /* pタグの後ろ側に星が現れます。 */
content: "★";
color: gold;
}5. 優先順位（!importantの乱用はやめて）
CSSで指定しているのに効かない…
指定方法が悪いのかな？と迷う場面は多いですが、
CSSが効かない最大の原因がこの「優先度」です。
しくみを知れば、無駄な !important から卒業できます。
セレクターの種類 |
優先度 |
|---|---|
インラインスタイル |
最強 |
IDセレクター |
高 |
クラス・属性・疑似クラス |
中 |
要素・疑似要素 |
低 |
!important |
全てを上書き |
優先度の点数感
優先度は点数で表すと以下のようになります。
#id = 100点
.class, [attr], :hover 等 = 10点
div, p, ::before 等 = 1点
:where(...) 内 = 0点（いくら入れても増えない）
同点なら後から書かれた方が勝ち（同じレイヤー内）
Copied!
.card p { color: red; } /* 10 + 1 = 11点 */
#main .card p { color: blue; } /* 100 + 10 + 1 = 111点 → 勝ち */
/* 結果：.cardの子要素pは青になる */6. おまけ
以下に紹介しきれなかったセレクター等を置いておきます。
実務でもよく使われるものばかりなので、興味があればぜひ試してみてください！
覚えておくと便利なセレクター
セレクター |
意味 |
|---|---|
[type="text"] |
属性が一致する要素 |
[href^="https"] |
属性値が特定文字列で |
[class$="btn"] |
属性値が特定文字列で |
[class*="btn"] |
属性値に特定文字列が |
[data-*] |
カスタムデータ属性 |
:root{} |
ページ全体（html）を指定。変数宣言でよく使う |
::selection{} |
選択範囲の色指定 |
7. 終わりに
CSSセレクターを理解すると、HTML構造の見通しが格段によくなります。
「どこをどう指定すればいいか」が明確になり、無駄なクラスを減らすこともできます。
無駄なクラスや、冗長なCSSが減ることで、サイトの軽量化にも繋がるので、是非試してみてください！
Share on
