こんにちは、フローです。
今回は、CSSで使う”!important”の事を書いていきたいと思います。
前回の記事はこちらです。
CSSの!importantとは
CSSの!importantルールは、
スタイルの優先度を強制的に上げるために使用されます。
!importantが付加されたスタイルは、他のスタイルよりも優先されます。
しかし、一種の”力技”であり、
通常のスタイルのカスケードや特異性による優先度の決定を無視するため、
適切に使用しないと予期しない結果や、
後からスタイルを調整する際の難易度を増す可能性があります。
基本的な使用方法は以下の通りです
p {
color: blue !important;
}
この例では、<p>タグ内のテキスト色が、
どのような他のスタイルが適用されていても、
!importantがあるために必ず青色になります。
しかし、!importantが複数存在する場合はどうでしょうか？
以下に例を示します
p {
color: blue !important;
}
p {
color: red !important;
}
この場合、
後に定義されたスタイル（ここでは赤色）が適用されます。
つまり、!importantが複数存在する場合でも、
CSSの基本的な原則である「後に記述されたルールが優先される」が適用されます。
さらに、
スタイルが直接要素に適用されている場合は、
そのスタイルが!importantであっても、
直接適用されたスタイルが優先されます。
以下に例を示します
p {
color: blue !important;
}
<p style="color: red;">This is a paragraph.</p>
この例では、
<p>タグ内のテキスト色は赤になります。
これは、直接要素に適用されたスタイルが、
他の場所で定義された!importantスタイルよりも優先されるからです。
このように、
!importantは一時的なスタイルの修正や、
特定のスタイルを強制する場合に便利ですが、
それが多用されるとコードが複雑化し、予期しない結果を招く可能性があるため、注意が必要です。
まとめ
以上が、CSSの!importantの使い方でした。
ここぞと言う時にだけ使う要素なので多様は禁物です。
試しに全部”!important”にして遊んで見るのもいいか知れません笑
レッツチャレンジ！
最近のコメント