CSS - Specificity

皆さん、こんにちは！エキサイティングなCSSのSpecificityの世界への旅へようこそ！多くの経験を持つ近所の親切なコンピュータ教師として、この重要な概念をガイドするのが楽しみです。プログラミングが初めての方でも心配しないでください。基本から始めて、少しずつ進んでいきましょう。コーヒー（またはお好みでテー）を一杯取り、一緒に潜りましょう！

CSS - Specificity

CSS Specificity - セレクタの重みカテゴリ

CSSのSpecificityを人気コンテストのように考えてみましょう。各セレクタには独自の「重み」または「重要度」があり、最も重みが高いセレクタが要素のスタイルを決定します。学校のクールな子どものように、よりクールなほど影響力が高まります！

以下に、セレクタの重みの主要な4つのカテゴリがあります（高い順から）：

インラインスタイル
ID
クラス、属性、pseudo-classes
要素とpseudo-elements

これらのそれぞれ詳しく見ていきましょう。

CSS Specificity - 各セレクタタイプのスコア

理解を容易にするために、各セレクタタイプにポイントを割り当てます。ゲームのように、各セレクタがその重要性に基づいてポイントを得ます。以下の便利なテーブルを覚えておきましょう：

セレクタタイプ	ポイント	例
インラインスタイル	1000	`<p style="color: red;">`
ID	100	`#header`
クラス、属性、pseudo-classes	10	`.button`, `[type="text"]`, `:hover`
要素とpseudo-elements	1	`p`, `::before`

以下に、いくつかのコード例で実際に見てみましょう：

/* Specificity: 1 */
p {
color: blue;
}

/* Specificity: 10 */
.text {
color: red;
}

/* Specificity: 100 */
#main-heading {
color: green;
}

この例では、<p id="main-heading" class="text">Hello, World!</p>という要素がある場合、テキストの色は緑になります。なぜならIDセレクタが最も高いSpecificityを持っているからです。

CSS Specificity - 例外ケース

「でも先生、これらの規則には例外があるの？」とお思いかもしれません。素晴らしい質問です！実際に一个大きな例外があります：!important宣言です。

プロパティに!importantを追加すると、Specificityに関係なく最終的な勝者になります。モノポリーの「牢から出られる無料カード」を使うようなものです。賢く使ってください！

p {
color: blue !important;
}

#main-heading {
color: green;
}

この場合、IDセレクタがより高いSpecificityを持っているにも関わらず、pセレクタの!importantルールがテキストを青にします。

CSS Specificity - 問題の対処法

時々、Specificityの問題に直面することがあります。心配しないでください；私たちの中最も優れた者にも起こることです！以下に、Specificityの問題を対処するためのいくつかのヒントを紹介します：

絶対に必要ない限り!importantを使わない。
可能な限りIDを使わずにクラスを使う。
セレクタの構造に注意し、シンプルに保つ。
Specificity計算機を使って確かめる。

CSS Specificity - 忘れてはならないポイント

CSSのSpecificityについてのいくつかの重要なポイントをまとめましょう：

Specificityはセレクタのコンポーネントに基づいて計算されます。
インラインスタイルは常に最も高いSpecificityを持っています（!importantによって上書きされる場合を除く）。
IDはクラスよりも、クラスは要素よりもSpecificityが高い。
より具体的なセレクタはより高いSpecificityを持っています。
同じSpecificityの場合は、宣言の順番で解決されます（詳細は次回）。

CSS Specificity - 同じSpecificity（最新が勝つ）

二つのセレクタが同じSpecificityを持つ場合、CSSファイルの最後のものが勝ちます。レースのphoto finishのように、最後に線を越えたものが賞を獲ります！

.button {
background-color: blue;
}

.button {
background-color: red;
}

この場合、ボタンは赤くなります。なぜなら、最後の宣言が赤いからです。

CSS Specificity - Specificityの階層（インラインスタイル）

インラインスタイルはSpecificityの重鎮です。Specificityは1000で、スタイルシート内のどのセレクタよりも高いです。以下に例を示します：

<p style="color: red;" class="blue-text" id="green-text">What color am I?</p>

#green-text {
color: green;
}

.blue-text {
color: blue;
}

この場合、テキストは赤くなります。なぜなら、インラインスタイルはIDとクラスのセレクタを上回るからです。

CSS Specificity - Specificityの階層（ID宣言）

インラインスタイルに次いで、IDセレクタが王座を占めます。Specificityは100で、クラスと要素を上回ります。以下に例を示します：

<p id="special-paragraph" class="normal-text">I'm a special paragraph!</p>

#special-paragraph {
color: purple;
}

.normal-text {
color: black;
}

p {
color: blue;
}

ここで、テキストは紫になります。なぜなら、IDセレクタがCSSルールの中で最も高いSpecificityを持っているからです。

CSS Specificity - Specificityの階層（クラス宣言）

次に、クラスセレクタが次の階層に位置します。Specificityは10で、要素セレクタよりもSpecificityが高いが、IDセレクタよりも低いです。以下に例を示します：

<p class="highlight">This is a highlighted paragraph.</p>

.highlight {
background-color: yellow;
}

p {
background-color: white;
}

この例では、パラグラフは黄色の背景を持つことになります。なぜなら、クラスセレクタが要素セレクタよりも高いSpecificityを持っているからです。

CSS Specificity - Specificityの階層（!importantルール）

そして最後に、核の選択肢：!importantです。この宣言は、Specificityに関係なくすべての宣言を上書きします。CSSデックの「トランプカード」とも言えます。

p {
color: blue !important;
}

#special-paragraph {
color: red;
}

.highlight {
color: green;
}

この場合、パラグラフは青くなります。なぜなら、!importantルールがIDのspecial-paragraphやクラスのhighlightを上回るからです。

そして、皆さん！CSSのSpecificityについての詳細をカバーしました。great specificity comes great responsibility. 使用する知識を賢く使い、あなたのスタイルが常に特定であり、セレクタが常に明確であることを祈っています！

Credits: Image by storyset