CSS !importantルール
!importantとは何ですか?
CSS !importantのルールは、通常よりもプロパティ/値に重要性を追加するために使用されます。
実際、!importantルールを使用すると、その要素の特定のプロパティに対する以前のスタイルルールがすべてオーバーライドされます。
例を見てみましょう
例
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
例の説明
上記の例では。IDセレクターとクラスセレクターの特異性が高くても、3つの段落すべての背景色が赤色になります。どちらの場合も、!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の1つまたは2つの望ましい公正な使用
!importantを使用する1つの方法は、他の方法ではオーバーライドできないスタイルをオーバーライドする必要がある場合です。これは、コンテンツ管理システム(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;
}
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。