はじめに

CSSを学びたいのStep18です！CSSを学ぶ中で、特異性や詳細度という単語が出てきました！？ん？？なんだこれ？ってなったんですが、CSSを学ぶ上ではすごく重要みたいです！
恥ずかしながら、知りませんでした💦💦💦そのため、学んでいきます！！

詳細度？特異性？って何？

詳細度と特異性は同じ概念で、CSSの適用を決定するアルゴリズムのこと。
CSS設定したのになぜか反映されない？という経験は、この詳細度が関与しています！

なるほどなぁ。めっちゃ経験ありますね！あれ、なんで色変わらないの？どうして右寄せになるの？みたいなやつはこれが原因です！、、、おおおお、めっちゃ重要やん！！

セレクターの重み

セレクターの重み分類を、詳細度の高いものから順番に見ていきましょう！！

なるほどねぇ。id→class→type→値なしの順なのね！めっちゃ簡単じゃん！と思うんだけど、例外や親子関係のコンポーネントとかもあって、結構複雑なんですよね😥まぁ、1つ1つ見ていきましょう！

1. 基本ケース

id, class, type, 値なしの順で見ていきます！

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="main-title" class="title" style="color: yellow;">見出し1</h1>
  <h1 id="main-title" class="title" >見出し1</h1>
  <h2 class="title">見出し2</h2>
  <h3>見出し3</h3>
</body>
</html>

styles.css

/* 詳細度: 1 (要素セレクタ) */
h1, h2, h3 {
  color: blue;
}

/* 詳細度: 10 (クラスセレクタ) */
.title {
  color: green;
}

/* 詳細度: 100 (IDセレクタ) */
#main-title {
  color: red;
}

/* 詳細度: 1000 (インラインスタイル) */
/* インラインスタイルはHTML内に直接記述されます */

→これはわかりやすい例ですね！次にいきましょう！

2. 親からの継承

親から継承した時の表示です。親から継承すると、途端になんでCSS効かないんだ？って思い始めますよね。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>
    <p>この段落は親要素のスタイルを継承します。</p>
  </div>
  <div class="child">
    <p>この段落はクラスセレクタのスタイルを継承します。</p>
  </div>
  <div id="specific-child">
    <p>この段落はIDセレクタのスタイルを継承します。</p>
  </div>
</body>
</html>

styles.css

/* 詳細度: 1 (要素セレクタ) */
div {
  color: blue;
}

/* 詳細度: 10 (クラスセレクタ) */
.child {
  color: green;
}

/* 詳細度: 100 (IDセレクタ) */
#specific-child {
  color: red;
}

3. 親と要素の組み合わせ

親とid,class,typeなどを混ぜます。ここくらいからわけわからなくなります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>
    <p>この段落は親要素のスタイルを継承します。</p>
  </div>
  <div class="child">
    <p>この段落はクラスセレクタのスタイルを継承します。</p>
  </div>
  <div id="specific-child">
    <p>この段落はIDセレクタのスタイルを継承します。</p>
  </div>
  <div>
    <div class="child">
      <p>この段落は要素セレクタとクラスセレクタの組み合わせのスタイルを継承します。</p>
      <p id="simple-id">この段落は単純なIDのスタイルを継承します。</p>
    </div>
  </div>
  <div id="specific-parent">
    <div class="child">
      <p id="simple-id">この段落は単純なIDのスタイルを継承します。</p>
      <p id="parent-child-id">この段落は親付きの子要素のIDのスタイルを継承します。</p>
      <p>この段落はIDセレクタとクラスセレクタの組み合わせのスタイルを継承します。</p>
    </div>
  </div>
</body>
</html>

styles.css

/* 詳細度: 1 (要素セレクタ) */
div {
  color: blue;
}

/* 詳細度: 10 (クラスセレクタ) */
.child {
  color: green;
}

/* 詳細度: 100 (IDセレクタ) */
#specific-child {
  color: red;
}

/* 詳細度: 11 (要素セレクタ + クラスセレクタ) */
div .child {
  color: purple;
}

/* 詳細度: 110 (IDセレクタ + クラスセレクタ) */
#specific-parent .child {
  color: orange;
}

/* 詳細度: 100 (単純なIDセレクタ) */
#simple-id {
  color: brown;
}

/* 詳細度: 110 (親付きの子要素のIDセレクタ) */
#specific-parent #parent-child-id {
  color: pink;
}

うーん、もうわけわからないですね。UIコンポーネントを利用する場合、裏でid振ってたりするので、もうわけわからなくなりますね。。。うーん、仕組みを理解しても大変そうだなぁ

isとwhereの違い

前回、isとwhereの違いがいまいちわからなかったので、今回比較して表示したいと思います！

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>見出し1</h1>
</body>
</html>

styles.css

/* 詳細度: 1 (要素セレクタ) */
h1 {
  color: blue;
}

/* 詳細度: 1 (要素セレクタ) */
:is(h1) {
  color: purple;
}

/* 詳細度: 0 (:whereセレクタ) */
:where(h1) {
  color: orange;
  font-size: 18px;
}

isの場合は詳細度が1,whereの場合は詳細度が0。そのため、カラーはisが適用されています！
ただ、font-sizeは他で定義されていないので、whereで示した18pxが適用されます
ちなみに、同一の詳細度の場合は後勝ちになるため、h1の要素より後で定義したisの値が適用されます！！

終わりに

詳細度の仕組みは理解できてきました！ただ、実際に使ってみると色々な要素が絡み合っているので、今後も苦戦しそうです😅