CSSセレクター

CSSセレクター

セレクターはCSSの核心です——スタイルを適用したいHTML要素を「選択」する役割を果たします。CSSは単純なタグセレクターから複雑なセレクターの組み合わせまで、複数のタイプのセレクターを提供し、あらゆる要素を細かく制御できます。

基本セレクター

1. タグセレクター（要素セレクター）

HTMLタグ名を直接セレクターとして使用し、ドキュメント内の同じ名前のすべてのタグにマッチします。

/* すべての<p>要素が赤くなる */
p {
  color: red;
}

/* すべての<h1>要素が青くなる */
h1 {
  color: blue;
}

/* すべての<div>要素にボーダーが付く */
div {
  border: 1px solid black;
}

2. クラスセレクター

class属性で要素をマッチします。クラス名はドット.をプレフィックスとして使用します。

/* class="highlight"のすべての要素 */
.highlight {
  background-color: yellow;
}

/* class="center"の<p>要素のみ */
p.center {
  text-align: center;
}

HTML要素は複数のクラスを持つことができ、スペースで区切ります：

<p class="highlight center">このテキストはハイライトされ、中央揃えになっています</p>

3. IDセレクター

id属性で要素をマッチし、ハッシュ#をプレフィックスとして使用します。

/* id="header"の要素を選択 */
#header {
  background-color: #333;
  color: white;
}

注意： IDは1ページに1回しか出現できません。IDセレクターは通常、一意の要素に使用されます。

4. 全称セレクター

アスタリスク*を使用して、ドキュメント内のすべての要素にマッチします。

/* すべての要素のマージンとパディングをリセット */
* {
  margin: 0;
  padding: 0;
}

全称セレクターは便利ですが、パフォーマンスに注意が必要です——複雑なスタイルが適用されると、ページのレンダリング速度に影響を与える可能性があります。

セレクターの詳細度

複数のセレクターが同じ要素に適用される場合、ブラウザは詳細度ルールを使用してどのスタイルが有効かを決定します：

優先順位は高い方から低い方へ：

インラインスタイル > IDセレクター > クラスセレクター > タグセレクター

詳細度の計算例

/* 詳細度：0001 */
p {
  color: black;
}

/* 詳細度：0010 */
.text {
  color: blue;
}

/* 詳細度：0100 */
#special {
  color: green;
}

/* 詳細度：0011（クラス + タグ） */
p.text {
  color: red;
}

同じ<p class="text" id="special">要素の場合、最終的なテキストの色は緑になります（IDセレクターが最も高い詳細度を持ちます）。

!important

CSSは「核兵器」——!important——を提供し、スタイルに強制的に最高の優先順位を持たせます：

p {
  color: red !important;
}

やむを得ない場合を除き、!importantは使用しないでください ——スタイルのデバッグが困難になります。セレクターの詳細度を高めて問題を解決することを優先してください。

セレクターのベストプラクティス

1. クラスセレクターを頻繁に使用する: クラスは再利用可能で最も柔軟なセレクター
2. IDセレクターは控えめに使用する: IDは一意で再利用が難しく、高い詳細度が上書きの問題を引き起こす可能性
3. 過度な指定を避ける: div.container ul li aは指定が細かすぎる；.nav-linkで十分
4. セレクターを簡潔に保つ: 長いセレクターはメンテナンスが難しく、パフォーマンスに影響

❓ よくある質問

📖 まとめ

• セレクターはCSSの基本スキルです——タグ、クラス、IDセレクターをマスターすれば、ほとんどのスタイリングニーズをカバーできます
• セレクターの詳細度を理解すると、「なぜスタイルが効かないのか」という混乱を避けることができます
• 実践では、クラスセレクターが最も頻繁に使用されます——クラスベースのスタイリングを優先してください

📝 演習

1. 見出し、段落、リストを含むHTMLページを作成してください。
2. タグセレクターを使用して、すべての段落のテキスト色を設定してください。
3. クラスセレクターを使用して、特定の要素に異なる背景色を設定してください（少なくとも2つの異なるクラスを定義）。
4. IDセレクターを使用して、ページ上の1つの要素に特別なスタイルを設定してください。
5. テスト：同じ要素にタグ、クラス、IDセレクターを適用し、どれが最も高い優先順位を持つかを観察してください。