CSSの！important宣言を理解する

!importantCSSでは、CSS宣言に適用して、一致するセレクターの他の競合するルールをオーバーライドできる特別な表記法です。

Webプロジェクトで作業する場合、他のスタイルが無効にするスタイル宣言があるのは当然です。

これは、CSSのコアメカニズムを理解している経験豊富な開発者にとっては問題ではありません。ただし、初心者にとって、期待するスタイル宣言がブラウザによって適用されない理由を理解するのは難しい場合があります。

そのため、問題を自然に解決することに集中するのではなく、!important宣言を追加して期待するスタイルを適用することで、迅速な修正を行う傾向があります。このアプローチはその瞬間は機能するかもしれませんが、別の複雑な問題を引き起こす可能性もあります。

このガイドでは、使用方法と使用!important時期を含め、以下を確認します。

• CSSコアメカニズム
• !important使用する前に宣言を理解する
• :is()およびその他の関連する疑似クラス関数
• いつ正確に!important宣言を使用できますか？
  • ユーティリティクラス
  • オーバーライドできないスタイルルール

十分に言った、飛び込みましょう。

CSSコアメカニズム

!importantCSSのコア原則を理解することで、宣言を使用することが明らかな時期を自然に知ることができます。このセクションでは、これらのメカニズムのいくつかについて説明します。

以下のHTMLおよびCSSコードを検討してください。見出しのテキストはどのような色になると思いますか？

まず、HTML：

<h2 class="mytitle">This is heading text</h2>

次に、CSS：

h2 {
  color: blue;
}
h2 {
  color: green;
}

テキストが緑色になります！これは基本的なCSSの基本です。CSSカスケードアルゴリズムでは、CSSルールの順序が重要です。この場合、ソースコードの最後にある宣言が優先されます。

通常、これは論理的です。そもそも、上記と同じセレクターを繰り返すべきではありません。CSSは繰り返しを望まないため、最後の宣言ルールを使用します。

ただし、のようなルート要素のジェネリックスタイルを作成してh2から、特定の要素のスタイルにクラスを追加する場合があります。HTMLから始めて、次の例も考えてみましょう。

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

次に、CSSを見てみましょう。

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

上記のコードでは、最初の要素にはクラスが適用されていないため、セレクターh2の緑色を取得していることは明らかです。h2

ただし、2番目の要素は、要素セレクタールールがCSSコードの最後にある場合でもh2、クラスセレクターのルールを使用します。.mytitleその理由は、要素セレクターと比較した場合、クラスセレクターの特異性が高いためです。

つまり、クラスセレクターの宣言に適用される重みは、要素セレクターの重みよりも大きくなります。

同様に、IDセレクターでの宣言は、クラスセレクターの宣言よりも多くなります。この場合、以下のコードの赤い色が優先されます。

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

CSSが続きます：

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

さらに、インラインstyle属性は、HTMLから始まるIDセレクターよりも優先されます。

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

次にCSSが続きます。

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

これはCSSの理想的な優先フローであり、異常を回避するために維持する必要があります。ほとんどの!important場合、宣言は、これらの基本的なルールを知らないときに行われます。

インラインスタイル属性と各セレクターには、ブラウザーが割り当てる値があります。そうすれば、どちらが優先度が高いか低いかがわかります。styleこの値は、属性に最も強い重み値が割り当てられた4桁の数字と考えてください1000。

これは、値が。のID 0100、次にクラス0010、最後に。の要素セレクターの後に続きます0001。

以下の例に示すように、特定の要素をターゲットとするセレクターを組み合わせることができる場合があります。

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

CSSが続きます：

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

h2.mytitle上記のCSSのセレクターの特異性は、h2との追加です.mytitle。つまり、0001 + 0010 = 0011。ただし、この合計値は、#maintitleIDの合計値よりも小さくなります0100。

そのため、ブラウザはIDセレクタの宣言を使用して、他の競合するルールを上書きします。重みが等しい場合は、最後のルール宣言が優先されます。

!importantどのルールが最も関連性があり、ブラウザがそれらを適用する理由がわかったので、この宣言を使用するかどうかは当然明らかになります。

使用する前に宣言を理解する!important

表記法の使用を検討する前に!important、特異性ルールに従い、CSSカスケードを使用していることを確認する必要があります。

以下のコードでは、h2とh3要素がred色になるようにスタイル設定されています。

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

次に、.mytitleCSSで：

.mytitle {
  color: red;
}

h3しかし、ある時点で、要素にblue色を付けたいとしましょう。以下のようなスタイルルールを追加しても、クラスの重みが大きく、要素セレクターよりも具体的であるため、色は変更されません。

.mytitle {...}
h3 {
  color: blue;
}

ただし、!importantより小さな重みでを使用すると、ブラウザは他の競合するルールに対してその宣言を強制します。

.mytitle {...}
h3 {
  color: blue !important;
}

これは、!important表記によって宣言の重みがカスケード優先順位で増加するためです。これが意味するのは、通常の優先フローを中断したということです。したがって、悪い習慣であり、コードの保守とデバッグが困難になる可能性があります。

他の時点で、上記の重要なルールをオーバーライドしたい場合は、!importantより高い特異性を持つ宣言に別の表記法を適用できます（または、ソースの下位にある場合は同じ）。次に、次のような結果になる可能性があります。

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

これは悪いことであり、避けるべきです。代わりに、次のことを確認する必要があります。

1. ルールを再配置したり、セレクターを書き直したりすると、カスケードの問題を解決できます
2. ターゲット要素の特異性を高めることで問題を解決できます

さて、調べてみましょう。スタイルルールに戻ると、特異性スコアを上げることblueで要素に色を適用できます。h3

以下に示すように、セレクターの特異性スコアが競合するルールに優先するまで、セレクターを組み合わせることができます。h3.mytitleセレクターは、スコアの0011よりも大きい特異.mytitle性スコアを与え0010ます。

.mytitle {...}
h3.mytitle {
  color: blue;
}

ご覧のとおり、!important宣言を使用してルールを適用するのではなく、特異性スコアを上げることに重点を置いています。

:is()およびその他の関連する疑似クラス関数

場合によっては、問題を疑似クラス関数にトレースすることがあります。したがって、それがどのように機能するかを知ることは、私たちに多くのストレスを節約することができます。別の例を見てみましょう。

プロジェクトに取り組んでいて、次のコードが表示されているとします。

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

次のCSSルールを使用すると、次の出力が得られます。

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

spanここで、段落内のとリンクテキストに別の色を付けたいとしましょうblue。これを行うには、次のルールを追加します。

.paragraph span,
.paragraph a {
  color: blue;
}

以前のルールは、blueさらに下にあるにもかかわらず、色をオーバーライドします。

簡単な修正として、次のような表記blueを使用して色を適用できます。!important

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

!importantしかし、ご想像のとおり、これは悪い習慣です。そのため、この表記をすぐに使用してはなりません。代わりに、すべてのセレクターがどのように機能するかを分析することから始めることができます。コードで使用されているの:is()は、メガセレクターをより圧縮された形式で記述するための疑似クラス関数です。

したがって、上記のコードには次のルールがあります。

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

これは、次と同等です。

#header span,
p span,
#header a,
p a {
  color: red;
}

したがって、とのよりも高い特異性スコアを持っているにもかかわらず、なぜ色をオーバーライド.paragraph spanしないのですか。.paragraph a00110002p spanp a

さて、のすべてのセレクターは、:is()引数のリストで最も高い特異性を使用します。その場合、のとの両方が#header、pの:is(#header, p)特異性スコアを使用します。#headerこれは0100です。したがって、ブラウザはより高い特異性を持っているため、その値に固執します。

したがって、このタイプの競合が発生した場合は、疑似クラス関数を使用せず、次のような同等の関数を使用することをお勧めします。

#header span,
p span,
#header a,
p a {
  color: red;
}

!importantこれで、カスケード順序を乱す表記を使用せずに、期待される結果を確認できるはずです。

CodeSandboxで自分の目で確かめることができます。

いつ正確に!important宣言を使用できますか？

!important以下は、表記の使用が推奨されるいくつかの機会です。

ユーティリティクラス

ページ上のすべてのボタンのスタイルを同じにしたいと仮定すると、ページ全体で再利用できるCSSルールを記述できます。以下のマークアップとスタイルを見てみましょう。

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

CSSが続きます：

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

上記のコードでは、section要素内のボタンリンクがCSSの両方のセレクターのターゲットになっていることがわかります。また、競合するルールについては、ブラウザーが最も具体的なルールを使用することを学びました。予想どおり、.content aスコアは0011while.btnで、スコアは0010。です。

ページは次のようになります。

この場合、次のように競合する宣言に表記を.btn追加することで、ルールを適用できます。!important

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

ページは期待どおりに表示されます。

CodeSandboxで自分の目で確かめてください。

オーバーライドできないスタイルルール

これは主に、動作するコードを完全に制御できない場合に発生します。WordPressのようなコンテンツ管理システムを使用している場合、WordPressテーマのインラインCSSスタイルがカスタムスタイルを覆していることに気付くことがあります。

この場合、!important宣言はテーマのインラインスタイルを上書きするのに便利です。

結論

宣言は、!important私たちが望むように使用されることを意図したものではありません。コードを制御できない状況や、独自のコードの非常に極端な場合など、絶対に必要な場合にのみ使用する必要があります。

使用するかどうかは、コアCSSメカニズムをどのように理解しているかによって異なります。このチュートリアルでは、それについても説明しました。

この投稿を楽しんでいただけたでしょうか。質問や貢献がある場合は、コメントセクションで考えを共有し、このチュートリアルをWeb上で共有することを忘れないでください。

ソース：https ：//blog.logrocket.com/understanding-css-important-declaration/

#css 

What is GEEK

Buddha Community

CSSの！important宣言を理解する

!importantCSSでは、CSS宣言に適用して、一致するセレクターの他の競合するルールをオーバーライドできる特別な表記法です。

Webプロジェクトで作業する場合、他のスタイルが無効にするスタイル宣言があるのは当然です。

これは、CSSのコアメカニズムを理解している経験豊富な開発者にとっては問題ではありません。ただし、初心者にとって、期待するスタイル宣言がブラウザによって適用されない理由を理解するのは難しい場合があります。

そのため、問題を自然に解決することに集中するのではなく、!important宣言を追加して期待するスタイルを適用することで、迅速な修正を行う傾向があります。このアプローチはその瞬間は機能するかもしれませんが、別の複雑な問題を引き起こす可能性もあります。

このガイドでは、使用方法と使用!important時期を含め、以下を確認します。

• CSSコアメカニズム
• !important使用する前に宣言を理解する
• :is()およびその他の関連する疑似クラス関数
• いつ正確に!important宣言を使用できますか？
  • ユーティリティクラス
  • オーバーライドできないスタイルルール

十分に言った、飛び込みましょう。

CSSコアメカニズム

!importantCSSのコア原則を理解することで、宣言を使用することが明らかな時期を自然に知ることができます。このセクションでは、これらのメカニズムのいくつかについて説明します。

以下のHTMLおよびCSSコードを検討してください。見出しのテキストはどのような色になると思いますか？

まず、HTML：

<h2 class="mytitle">This is heading text</h2>

次に、CSS：

h2 {
  color: blue;
}
h2 {
  color: green;
}

テキストが緑色になります！これは基本的なCSSの基本です。CSSカスケードアルゴリズムでは、CSSルールの順序が重要です。この場合、ソースコードの最後にある宣言が優先されます。

通常、これは論理的です。そもそも、上記と同じセレクターを繰り返すべきではありません。CSSは繰り返しを望まないため、最後の宣言ルールを使用します。

ただし、のようなルート要素のジェネリックスタイルを作成してh2から、特定の要素のスタイルにクラスを追加する場合があります。HTMLから始めて、次の例も考えてみましょう。

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

次に、CSSを見てみましょう。

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

上記のコードでは、最初の要素にはクラスが適用されていないため、セレクターh2の緑色を取得していることは明らかです。h2

ただし、2番目の要素は、要素セレクタールールがCSSコードの最後にある場合でもh2、クラスセレクターのルールを使用します。.mytitleその理由は、要素セレクターと比較した場合、クラスセレクターの特異性が高いためです。

つまり、クラスセレクターの宣言に適用される重みは、要素セレクターの重みよりも大きくなります。

同様に、IDセレクターでの宣言は、クラスセレクターの宣言よりも多くなります。この場合、以下のコードの赤い色が優先されます。

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

CSSが続きます：

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

さらに、インラインstyle属性は、HTMLから始まるIDセレクターよりも優先されます。

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

次にCSSが続きます。

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

これはCSSの理想的な優先フローであり、異常を回避するために維持する必要があります。ほとんどの!important場合、宣言は、これらの基本的なルールを知らないときに行われます。

インラインスタイル属性と各セレクターには、ブラウザーが割り当てる値があります。そうすれば、どちらが優先度が高いか低いかがわかります。styleこの値は、属性に最も強い重み値が割り当てられた4桁の数字と考えてください1000。

これは、値が。のID 0100、次にクラス0010、最後に。の要素セレクターの後に続きます0001。

以下の例に示すように、特定の要素をターゲットとするセレクターを組み合わせることができる場合があります。

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

CSSが続きます：

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

h2.mytitle上記のCSSのセレクターの特異性は、h2との追加です.mytitle。つまり、0001 + 0010 = 0011。ただし、この合計値は、#maintitleIDの合計値よりも小さくなります0100。

そのため、ブラウザはIDセレクタの宣言を使用して、他の競合するルールを上書きします。重みが等しい場合は、最後のルール宣言が優先されます。

!importantどのルールが最も関連性があり、ブラウザがそれらを適用する理由がわかったので、この宣言を使用するかどうかは当然明らかになります。

使用する前に宣言を理解する!important

表記法の使用を検討する前に!important、特異性ルールに従い、CSSカスケードを使用していることを確認する必要があります。

以下のコードでは、h2とh3要素がred色になるようにスタイル設定されています。

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

次に、.mytitleCSSで：

.mytitle {
  color: red;
}

h3しかし、ある時点で、要素にblue色を付けたいとしましょう。以下のようなスタイルルールを追加しても、クラスの重みが大きく、要素セレクターよりも具体的であるため、色は変更されません。

.mytitle {...}
h3 {
  color: blue;
}

ただし、!importantより小さな重みでを使用すると、ブラウザは他の競合するルールに対してその宣言を強制します。

.mytitle {...}
h3 {
  color: blue !important;
}

これは、!important表記によって宣言の重みがカスケード優先順位で増加するためです。これが意味するのは、通常の優先フローを中断したということです。したがって、悪い習慣であり、コードの保守とデバッグが困難になる可能性があります。

他の時点で、上記の重要なルールをオーバーライドしたい場合は、!importantより高い特異性を持つ宣言に別の表記法を適用できます（または、ソースの下位にある場合は同じ）。次に、次のような結果になる可能性があります。

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

これは悪いことであり、避けるべきです。代わりに、次のことを確認する必要があります。

1. ルールを再配置したり、セレクターを書き直したりすると、カスケードの問題を解決できます
2. ターゲット要素の特異性を高めることで問題を解決できます

さて、調べてみましょう。スタイルルールに戻ると、特異性スコアを上げることblueで要素に色を適用できます。h3

以下に示すように、セレクターの特異性スコアが競合するルールに優先するまで、セレクターを組み合わせることができます。h3.mytitleセレクターは、スコアの0011よりも大きい特異.mytitle性スコアを与え0010ます。

.mytitle {...}
h3.mytitle {
  color: blue;
}

ご覧のとおり、!important宣言を使用してルールを適用するのではなく、特異性スコアを上げることに重点を置いています。

:is()およびその他の関連する疑似クラス関数

場合によっては、問題を疑似クラス関数にトレースすることがあります。したがって、それがどのように機能するかを知ることは、私たちに多くのストレスを節約することができます。別の例を見てみましょう。

プロジェクトに取り組んでいて、次のコードが表示されているとします。

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

次のCSSルールを使用すると、次の出力が得られます。

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

spanここで、段落内のとリンクテキストに別の色を付けたいとしましょうblue。これを行うには、次のルールを追加します。

.paragraph span,
.paragraph a {
  color: blue;
}

以前のルールは、blueさらに下にあるにもかかわらず、色をオーバーライドします。

簡単な修正として、次のような表記blueを使用して色を適用できます。!important

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

!importantしかし、ご想像のとおり、これは悪い習慣です。そのため、この表記をすぐに使用してはなりません。代わりに、すべてのセレクターがどのように機能するかを分析することから始めることができます。コードで使用されているの:is()は、メガセレクターをより圧縮された形式で記述するための疑似クラス関数です。

したがって、上記のコードには次のルールがあります。

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

これは、次と同等です。

#header span,
p span,
#header a,
p a {
  color: red;
}

したがって、とのよりも高い特異性スコアを持っているにもかかわらず、なぜ色をオーバーライド.paragraph spanしないのですか。.paragraph a00110002p spanp a

さて、のすべてのセレクターは、:is()引数のリストで最も高い特異性を使用します。その場合、のとの両方が#header、pの:is(#header, p)特異性スコアを使用します。#headerこれは0100です。したがって、ブラウザはより高い特異性を持っているため、その値に固執します。

したがって、このタイプの競合が発生した場合は、疑似クラス関数を使用せず、次のような同等の関数を使用することをお勧めします。

#header span,
p span,
#header a,
p a {
  color: red;
}

!importantこれで、カスケード順序を乱す表記を使用せずに、期待される結果を確認できるはずです。

CodeSandboxで自分の目で確かめることができます。

いつ正確に!important宣言を使用できますか？

!important以下は、表記の使用が推奨されるいくつかの機会です。

ユーティリティクラス

ページ上のすべてのボタンのスタイルを同じにしたいと仮定すると、ページ全体で再利用できるCSSルールを記述できます。以下のマークアップとスタイルを見てみましょう。

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

CSSが続きます：

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

上記のコードでは、section要素内のボタンリンクがCSSの両方のセレクターのターゲットになっていることがわかります。また、競合するルールについては、ブラウザーが最も具体的なルールを使用することを学びました。予想どおり、.content aスコアは0011while.btnで、スコアは0010。です。

ページは次のようになります。

この場合、次のように競合する宣言に表記を.btn追加することで、ルールを適用できます。!important

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

ページは期待どおりに表示されます。

CodeSandboxで自分の目で確かめてください。

オーバーライドできないスタイルルール

これは主に、動作するコードを完全に制御できない場合に発生します。WordPressのようなコンテンツ管理システムを使用している場合、WordPressテーマのインラインCSSスタイルがカスタムスタイルを覆していることに気付くことがあります。

この場合、!important宣言はテーマのインラインスタイルを上書きするのに便利です。

結論

宣言は、!important私たちが望むように使用されることを意図したものではありません。コードを制御できない状況や、独自のコードの非常に極端な場合など、絶対に必要な場合にのみ使用する必要があります。

使用するかどうかは、コアCSSメカニズムをどのように理解しているかによって異なります。このチュートリアルでは、それについても説明しました。

この投稿を楽しんでいただけたでしょうか。質問や貢献がある場合は、コメントセクションで考えを共有し、このチュートリアルをWeb上で共有することを忘れないでください。

ソース：https ：//blog.logrocket.com/understanding-css-important-declaration/

#css