Template Style — !important ハック

!important ハック

2009年10月9日 | CSS | No Comments |

!important とは

スタイルはタグやクラス、ID などを識別して適用されます。スタイルを重複して指定すると、タグよりもクラス、クラスよりも ID が優先されます。また、CSS ブロックや外部 CSS ファイルを使用した場合は、より下に記述したスタイルが優先されます。次のコードの場合、より下に記述した color: #000000 が適用されます。

.ExampleClass {
    color: #FFFFFF;
    color: #000000;
}

しかし、!important をスタイルの値の後ろに記述することで、その値を最優先して適用することができます。次のコードの場合、color: #000000 は打ち消されて color: #FFFFFF が適用されます。

.ExampleClass {
    color: #FFFFFF !important;
    color: #000000;
}

!important ハックとは

!important によって最優先させる値をコントロールできますが、Internet Explorer 6.0 以下は正しく処理しません。そこで、IE6以外に適用する値に !important を追記し、IE6のみに適用する値を下に記述することで IE6 のバグを回避することができます。次のコードでは、IE6 以外のブラウザでは color: #FFFFFF が、IE6 では color: #000000 が適用されます。

.ExampleClass {
    color: #FFFFFF !important;
    color: #000000;
}

Post a comment.