CSS !important ルール

!importantとは何ですか？

CSSでの !important ルールは、属性/値に対して通常のスタイルよりも高い優先順位を付けるために使用されます。

実際には、 !important ルールは、その特定の属性に対して先に設定されたすべてのスタイルルールを覆すことになります！

以下に例を見てみましょう：

例

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

自分で試してみる

例の説明

上記の例では、すべての3つのパラグラフが赤い背景色を取得しますが、IDセレクターやクラスセレクターがより高い特異性を持っています。!important ルールはこれらの両方のbackground-color属性を覆します。

!importantの重要な事項

覆す !important ルールを覆す唯一の方法は、同じ（またはより高い）特異性を持つ別の宣言をソースコードに含めることです。 !important ルール - これが問題の始まりです！これにより、CSSコードが混乱し、デバッグも難しくなります。特に大規模なスタイルシートがある場合です！

ここでは、シンプルな例を作成しました。CSSソースコードを確認すると、どの色が最も重要と考えられているかははっきりしません：

例

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

自分で試してみる

ヒント：理解してください !important ルールは良いです。CSSソースコードの中でそれを見ることがありますが、絶対に必要でない限り使用しないでください。

いくつかの合理な使用例があります。

もう一つの使用例は、 !important の場合、他の方法で覆えないスタイルを覆す必要がある場合です。これは、CMS（コンテンツ管理システム）を使用してCSSコードを編集できない場合が考えられます。その場合、一部のCMSスタイルを覆すためにカスタムスタイルを設定できます。

もう一つの使用例は、 !important の場合は、ページ上のすべてのボタンに特別な外観を持たせたいと考えていると仮定します。ここでは、ボタンのスタイルは灰色の背景色、白色のテキスト、いくつかのインラインパディングとボーダーです：

例

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

自分で試してみる

もしボタンをより特異な別の要素に配置すると、ボタンの外観が変わることがありますし、属性が衝突することがあります。以下はその例です：

例

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

自分で試してみる

すべてのボタンがいつでも同じ外観を持つように「強制」するために、以下を追加できます： !important 以下のようにボタンの属性に規則を追加します：

例

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

自分で試してみる