CSS要素タイプセレクター — タグ名による選択
HTMLタグ名で要素をターゲットするCSSタイプセレクターを理解します。詳細度、他のセレクターとの組み合わせ、タイプセレクターとクラスの使い分けを学びます。
Basic Selectors
詳細な説明
CSS要素タイプセレクター
タイプセレクター（タグセレクターまたは要素セレクターとも呼ばれる）は、HTMLタグ名で要素をターゲットします。利用可能な最もシンプルなCSSセレクターの一つです。
構文
h1 {
font-size: 2rem;
}
p {
line-height: 1.6;
}
a {
color: blue;
text-decoration: underline;
}
詳細度
タイプセレクターは最も低い非ゼロの詳細度を持ちます：(0, 0, 1)。ユニバーサルセレクター(*)のみが(0, 0, 0)でより低い詳細度を持ちます。
タイプセレクターの組み合わせ
タイプセレクターは他のセレクターと頻繁に組み合わされます：
/* タイプ + クラス */
a.button { } /* 詳細度: (0, 1, 1) */
/* タイプ + 属性 */
input[type="text"] { } /* 詳細度: (0, 1, 1) */
/* タイプ + 疑似クラス */
li:first-child { } /* 詳細度: (0, 1, 1) */
タイプセレクターを使用すべき場面
- 基本的なタイポグラフィスタイル（h1-h6、p、blockquote）
- リセット/ノーマライズスタイルシート
- 散文/記事コンテンツ（生のHTMLをスタイリング）
- フォーム要素のデフォルト（input、select、textarea、button）
ユースケース
タイプセレクターはベーススタイルシートとCSSリセットの基本です。すべてのWebプロジェクトで、デフォルトのタイポグラフィ（h1-h6、p、a）、フォーム要素の外観（input、button、select）、構造要素のスタイリング（body、main、section）を確立するために使用されます。