この記事の要点

タイプセレクタ（要素型セレクタ）は h1 や p のように要素名をそのまま書いて指定するセレクタ 同じ要素名のすべての要素にスタイルが当たる（範囲が広い） 詳細度は 0,0,0,1 と低く、クラス・ID で容易に上書きされる 大文字小文字は HTML では区別しないが、慣例として小文字で書く リセット CSS や全体方針には向くが、個別調整にはクラスセレクタを併用するのが定石

タイプセレクタとは

タイプセレクタ（type selector / 要素型セレクタ）は、CSS で要素を指定するもっとも基本のセレクタです。h1、p、div のようにHTML タグ名をそのまま書くだけで、その要素すべてが適用範囲になります。

基本構文

/* すべての h1 要素 */
h1 {
  color: #c0392b;
  font-size: 2em;
}

/* すべての p 要素 */
p {
  line-height: 1.6;
  margin: 0.5em 0;
}

/* すべての a 要素 */
a {
  color: #2980b9;
  text-decoration: none;
}

適用例

<style>
  h1 { color: red; }
  p  { color: #333; }
</style>

<h1>見出し</h1>      <!-- 赤くなる -->
<p>本文</p>          <!-- #333 になる -->
<p>もう一つの段落</p> <!-- これも #333 -->

他のセレクタとの違い

種類	書き方	意味	詳細度
タイプセレクタ	p	その要素名すべて	0,0,0,1
クラスセレクタ	.box	その class を持つ要素	0,0,1,0
ID セレクタ	#header	その id を持つ要素	0,1,0,0
ユニバーサル（全称）セレクタ	*	すべての要素	0,0,0,0
属性セレクタ	[type="text"]	その属性を持つ要素	0,0,1,0

複数指定（カンマ区切り）

同じスタイルを複数の要素に当てたいときは、カンマで並べます。

/* h1〜h3 をまとめて指定 */
h1, h2, h3 {
  font-family: "Yu Gothic", sans-serif;
  font-weight: bold;
}

/* リスト系をまとめて余白リセット */
ul, ol, dl {
  margin: 0;
  padding: 0;
}

子孫・子セレクタとの組み合わせ

タイプセレクタは単独だけでなく、他のセレクタと組み合わせて絞り込みに使われることが多いです。

/* article 内の p だけ */
article p {
  font-size: 1rem;
}

/* nav の直下の ul だけ */
nav > ul {
  list-style: none;
}

/* .card 内の h2 だけ */
.card h2 {
  border-bottom: 2px solid #ccc;
}

詳細度が低いことに注意

タイプセレクタは詳細度 (0,0,0,1) がもっとも低い部類です。クラスセレクタや ID セレクタが同じプロパティを指定するとそちらが勝ちます。

p        { color: black; }   /* 詳細度 0,0,0,1 */
.notice  { color: red;   }   /* 詳細度 0,0,1,0 ← こちらが勝つ */

/* HTML 側
   <p class="notice">注意文</p>  → 赤くなる */

使い分けの考え方

用途	向くセレクタ	理由
サイト全体のベーススタイル（body, p, h*, a）	タイプセレクタ	広く一律に当てたい
コンポーネント単位（カード、ボタン）	クラスセレクタ	同じタグでも見た目を変えたい
1 箇所だけ（ヘッダー、フッター）	ID または class	詳細度・再利用性のバランス

よくある落とし穴

• 影響範囲が広すぎる — a { color: red; } はサイト中のリンク全部に効く。狙った場所だけにしたいときはクラスで限定する
• リセット CSS と衝突する — normalize.css や Tailwind の preflight でデフォルトが消されていて、タイプセレクタの効きが想定と違うことがある
• SVG 要素にも当たる — circle, rect などにタイプセレクタを書くと SVG 内の要素にも適用される
• 大文字小文字 — HTML では区別しないが、XHTML / XML / SVG の文脈では区別する。慣例どおり小文字で統一するのが安全
• カスタム要素にも当たる — Web Components（<my-card> など）もタイプセレクタで指定可能

歴史的経緯と CSS 仕様

タイプセレクタは CSS1 から存在する最古のセレクタです。CSS2 で名前空間（XML 由来）の概念が追加され、CSS3 / Selectors Level 4 でも基本的な意味は変わっていません。詳細度の計算式 (0,0,0,1) は仕様で固定であり、ブラウザ間の解釈差もありません。長い歴史を持つ反面、現代の CSS 設計手法（BEM、ユーティリティファースト、CSS Modules）ではほとんどのスタイルがクラスセレクタに集約されており、タイプセレクタはベーススタイルやリセット用途に縮小しています。

BEM・ユーティリティとの関係

近年の設計手法では、コンポーネントのスタイルはクラスベースで書くのが主流です。タイプセレクタが活躍するのは次のような場面に限られます。

• サイト全体のベーススタイル（body, p, h1〜h6, a）
• リセット CSS（* { box-sizing: border-box; }, img { max-width: 100%; } 等）
• 記事本文などマークアップを直接書く領域（CMS の本文、Markdown 由来の HTML）
• フォーム要素のデフォルト調整（input, select, textarea）

個別コンポーネントの装飾はクラスに任せ、タイプセレクタは「アプリ全体の地ならし」として使うと、詳細度の競合が起こりにくく、保守しやすい CSS になります。Tailwind CSS のようなユーティリティファーストのフレームワークでも、内部的にはリセット用に img, button, input 等のタイプセレクタが大量に使われています。

使うべきとき・避けるべきとき

シーン	判断	理由
サイト全体の本文フォント	使う	body 1 つに当てれば波及する
記事内の blockquote 装飾	使う	意味タグなので種別単位で装飾が自然
カード内の h3	避ける	カードの h3 だけ装飾したいなら .card h3
サードパーティウィジェット内	避ける	影響が広く、相手側のスタイルを壊す恐れ
ユーティリティクラスの代用	避ける	クラスベース設計を貫いたほうが見通しが良い

パフォーマンス上の話

セレクタのパフォーマンスは現代ブラウザではほぼ気にしなくてよい水準ですが、参考として: タイプセレクタは右端マッチ（CSS は右から左にマッチング）なので、複雑な子孫セレクタ div nav ul li a のような書き方はマッチ判定に時間がかかる傾向があります。多くの場合 .nav-link のような単独クラスのほうが速いです。とはいえ普通の規模のサイトで体感差が出ることはまずありません。

関連

• セレクタ — 親カテゴリ
• ユニバーサルセレクタ
• クラスセレクタ
• IDセレクタ
• 属性セレクタ
• 子孫セレクタ