CSSの特異性

CSSの特異性の意味とそれが重要である理由を学ぶ

要素が、同じプロパティに影響を与える異なるセレクターを持つ複数のルールのターゲットになっている場合はどうなりますか？

たとえば、この要素について話しましょう。

<p class="dog-name">Roger</p>

私たちは持てる

.dog-name {
  color: yellow;
}

とターゲットとする別のルールp、色を別の値に設定します。

p {
  color: red;
}

そして、ターゲットとする別のルールp.dog-name。どのルールが他のルールよりも優先されますか、またその理由は何ですか？

特異性を入力します。より具体的なルールが勝ちます。 2つ以上のルールに同じ特異性、最後に表示されたものが勝ちます。

実際には、より具体的なことは、初心者にとって少し混乱することがあります。また、これらのルールを頻繁に見ない、または単に見落としている専門家にとっても混乱を招くと思います。

特異性の計算方法

特異性は、規則を使用して計算されます。

4つのスロットがあり、それぞれが0から始まります。0 0 0 0。左側のスロットが最も重要で、右端のスロットが最も重要ではありません。

10進法の数値で機能するように：1 0 0 0より高い0 1 0 0。

Slot 1

最初のスロット、右端のスロットは最も重要ではありません。

この値は、タイプセレクター。タイプはタグ名です。ルールに複数のタイプセレクターがある場合は、それに応じてこのスロットに格納されている値をインクリメントします。

例：

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

Slot 2

2番目のスロットは3つインクリメントされます。

クラスセレクター
疑似クラスセレクター
属性セレクター

ルールがそれらのいずれかを満たすたびに、右から2番目の列の値をインクリメントします。

例：

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

もちろん、スロット2セレクターはスロット1セレクターと組み合わせることができます。

div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */

クラスの優れたトリックの1つは、同じクラスを繰り返して特異性を高めることができることです。例えば：

.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

Slot 3

スロット3には、CSSファイルのCSSの特異性に影響を与える可能性のある最も重要なものが含まれています。id。

すべての要素はid属性が割り当てられ、スタイルシートでそれを使用して要素をターゲットにできます。

例：

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Slot 4

スロット4はインラインスタイルの影響を受けます。インラインスタイルは、外部CSSファイルまたは内部で定義されたルールよりも優先されます。styleページヘッダーのタグ。

例：

<p style="color: red">Test</p> /* 1 0 0 0 */

CSSの他のルールで色が定義されている場合でも、このインラインスタイルルールが適用されます。 1つの場合を除いて-もし!important is used, which fills the slot 5.

重要性

ルールがで終わる場合、特異性は重要ではありません!important：

p {
  font-size: 20px !important;
}

そのルールは、より具体的なルールよりも優先されます

追加!importantCSSルールでは、特異性ルールに従って、そのルールが他のどのルールよりも重要になります。別のルールを優先できる唯一の方法は、!important同様に、そして他のそれほど重要でないスロットでより高い特異性を持っています。

チップ

一般に、必要な量の特異性を使用する必要がありますが、それ以上は使用しないでください。このようにして、他のセレクターを作成して、前のルールで設定されたルールを気が狂うことなく上書きできます。

!importantCSSが提供する非常に議論の多いツールです。多くのCSS専門家は、それを使用することに反対しています。特にいくつかのスタイルを試すときにそれを使用していることに気付き、CSSルールは非常に特異性が高いので使用する必要があります!importantブラウザに新しいCSSを適用させるため。

しかし、一般的に、!importantCSSファイルに場所を置くべきではありません。

を使用してidCSSのスタイルへの属性も非常に高い特異性を持っているため、多くの議論があります。代わりに、特異性の低いクラスを使用することをお勧めします。クラスは操作が簡単で、より強力です（要素に複数のクラスを設定でき、クラスは複数回再利用できます）。

特異性を計算するためのツール

あなたはサイトを使用することができますhttps://specificity.keegan.st/特異度の計算を自動的に実行します。

それは素晴らしいフィードバックツールになる可能性があるので、物事を理解しようとしている場合は特に便利です。

私の無料ダウンロードCSSハンドブック

CSSの特異性