セレクタと詳細度の基礎

CSSのセレクタと詳細度（specificity）はスタイルを適用する際の重要な概念です。詳細度は、複数のスタイルルールが同じ要素に適用される場合に、どのルールが優先されるかを決定します。以下に、これらの概念を理解するためのHTML/CSSの例を示します。

1. 基本的なセレクタ

html
<p>Paragraph</p>
<div class="example">Class Selector</div>
<div id="unique">ID Selector</div>
css
p {
  color: blue;
}

.example {
  color: green;
}

#unique {
  color: red;
}

この例では、タグセレクタ（p）、クラスセレクタ（.example）、IDセレクタ（#unique）を使用しています。

2. 詳細度の比較

html
<div class="example" id="unique">Class and ID</div>
css
.example {
  color: green;
}

#unique {
  color: red;
}

この例では、.example よりも #unique の方が詳細度が高く、#unique のスタイルが優先されます。

3. 複合セレクタ

html
<div class="container">
  <p class="example">Paragraph in Container</p>
</div>
css
p.example {
  color: green;
}

div .example {
  color: red;
}

複合セレクタを使用すると、詳細度がさらに増します。この例では、div .example が p.example よりも詳細度が高いため、赤色が適用されます。

4. 疑似クラス

html
<a href="#">Link</a>
css
a:hover {
  color: red;
}

疑似クラス（この例では :hover）もセレクタの一部として詳細度に影響します。

5. インラインスタイル

html
<p style="color: blue;">Inline Style</p>

インラインスタイルは、外部または内部のCSSよりも高い詳細度を持ちます。

6. !important の使用

css
p {
  color: red !important;
}

p {
  color: green;
}

!important を使用すると、他のどのルールよりも優先されますが、乱用は避けるべきです。

これらの例を通じて、CSSのセレクタと詳細度の概念を実践的に理解できます。異なるセレクタの組み合わせやルールを試して、どのようにスタイルが適用されるかを観察することが重要です。

練習問題

セレクタと詳細度に関する理解を深めるために、実践的な練習問題をいくつか示します。これらの問題は、異なるタイプのセレクタの使用と、それらが詳細度にどのように影響するかを理解するのに役立ちます。

練習問題 1: セレクタの詳細度を理解する

html
<div class="box" id="firstBox">Box 1</div>
<div class="box">Box 2</div>
<p class="text">Paragraph</p>
css
div {
  color: blue;
}

.box {
  color: green;
}

#firstBox {
  color: red;
}

div.box {
  color: purple;
}

問題:

  1. 各div要素はどの色で表示されるか？
  2. p.text にスタイルを追加して、どの色が適用されるか予測せよ。

練習問題 2: 複合セレクタと疑似クラス

html
<ul>
  <li class="item">Item 1</li>
  <li class="item special">Item 2</li>
  <li class="item">Item 3</li>
</ul>
css
.item {
  color: blue;
}

.special {
  color: green;
}

li.item:hover {
  color: red;
}

問題:

  1. 通常時に各リストアイテムはどの色で表示されるか？
  2. ホバー時に色はどう変わるか？

練習問題 3: インラインスタイルと!important

html
<p style="color: blue;">Paragraph 1</p>
<p class="text" style="color: green;">Paragraph 2</p>
css
p {
  color: red !important;
}

.text {
  color: orange;
}

問題:

  1. 各段落はどの色で表示されるか？

練習問題 4: セレクタの組み合わせ

html
<div class="container">
  <p class="text">Text 1</p>
  <p>Text 2</p>
</div>
css
p {
  color: blue;
}

.container p {
  color: green;
}

.text {
  color: red;
}

問題:

  1. 各段落はどの色で表示されるか？

これらの問題を解くことで、セレクタの種類と詳細度の理解を深めることができます。問題を実際にコードで試して、予想した結果と実際の結果を比較すると良いでしょう。