CSSの特異性
特異性とは何ですか？
同じ要素を指すCSSルールが2つ以上ある場合、最も高い特異性の値を持つセレクターが「勝ち」、そのスタイル宣言がそのHTML要素に適用されます。
特異性は、どのスタイル宣言が最終的に要素に適用されるかを決定するスコア/ランクと考えてください。
次の例を見てください。
例1
この例では、「p」要素をセレクターとして使用し、この要素に赤い色を指定しました。テキストは赤になります：
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
次に、例2を見てください。
例2
この例では、クラスセレクター（「test」という名前）を追加し、このクラスに緑色を指定しました。これで、テキストは緑色になります（要素セレクター「p」に赤色を指定した場合でも。これは、クラスセレクターの優先度が高いためです。
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
次に、例3を見てください。
例3
この例では、idセレクター（「demo」という名前）を追加しました。IDセレクターの優先度が高くなるため、テキストは青色になります。
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
次に、例4を見てください。
例4
この例では、「p」要素にインラインスタイルを追加しました。インラインスタイルが最優先されるため、テキストはピンク色になります。
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
特異性階層
すべてのCSSセレクターは、特異性階層にその位置を持っています。
セレクターの特異性レベルを定義する4つのカテゴリーがあります。
- インラインスタイル-例：<h1 style = "color：pink;">
- ID-例：#navbar
- クラス、疑似クラス、属性セレクター-例：.test、：hover、[href]
- 要素と疑似要素-例：h1、：before
特異性を計算する方法は？
特異度の計算方法を覚えておいてください！
0から開始し、ID値ごとに100を追加し、クラス値（または疑似クラスまたは属性セレクター）ごとに10を追加し、要素セレクターまたは疑似要素ごとに1を追加します。
注：インラインスタイルは1000の特異性値を取得し、常に最高の優先順位が与えられます！
注2：このルールには1つの例外があります。!important
ルールを使用すると、インラインスタイルも上書きされます。
次の表は、特異度の値を計算する方法の例を示しています。
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
特異性の値が最も高いセレクターが勝ち、有効になります。
次の3つのコードフラグメントについて考えてみます。
例
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Aの特異性は1（1つの要素セレクター）
Bの特異性は101（1つのID参照+ 1つの要素セレクター）
Cの特異性は1000（インラインスタイリング）
3番目のルール（C）の特異性の値（1000）が最も高いため、このスタイル宣言が適用されます。
より具体的なルールの例
同等の特異性：最新のルールが優先される-同じルールが外部スタイルシートに2回書き込まれる場合、最新のルールが優先されます。
例
h1 {background-color: yellow;}
h1 {background-color: red;}
IDセレクターは属性セレクターよりも高い特異性を持っています -次の3つのコード行を見てください。
例
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
最初のルールは他の2つよりも具体的であるため、適用されます。
コンテキストセレクターは、単一の要素セレクターよりも具体的です-埋め込まれたスタイルシートは、スタイル設定される要素に近いです。したがって、次の状況では
例
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
後者のルールが適用されます。
クラスセレクターは、任意の数の要素セレクターを打ち負かします-.introなどのクラスセレクターは、h1、p、divなどを打ち負かします。
例
.intro {background-color: yellow;}
h1 {background-color:
red;}
ユニバーサルセレクター（*）と継承された値の特異性は0です-ユニバーサルセレクター（*）と継承された値は無視されます！