【CSS】importantで優先順位を変更する際の方法と注意点・importantが効かないときの確認項目も解説

CSSの「important」とは

プロパティの優先順位を上げたいときに記載する宣言です。importantが記載されたプロパティは、仮に優先順位が低くても、最優先で実行されます。

つまり、どうしても優先順位が低くなってしまうプロパティを優先して実行させたいときに活用されるのがimportantです。たとえば、以下のようなコードがあったとします。

上下のプロパティはどちらも、h2の文字色を変更するためのプロパティです。実行すると、CSSの決まりとしては下のプロパティが優先されます。つまり、h2の文字色はblueになるというわけです。

そこで以下のようにimportantを追加します。

このソースコードを実行すると、h2の文字色はblueではなくgreenになります。このように、あるプロパティの優先順位を上げる役割を持つのがimportantです。

importantの注意点

importantは使い過ぎないことが重要です。その主な理由には、以下の3つが挙げられます。

• コードが複雑で長くなる
• 最優先に指定するものが複数あると不具合が起きる
• 修正部分にimportantが記載されていると時間がかかる

CSSでは、importantを使用しなくても、どのコードを優先するか仕様で決まっています。したがって、CSSにおいて優先順位を設定する際は、CSSの仕様に乗っ取って順位づけをすることが一般的です。importantが必須ではない場面では、可能な限りimportantの使用を控えるようにしましょう。

また、importantはほかのプロパティを抑えて優先順位を上げるため、とても強い力を持っています。修正部分にimportantが関連してくると、大掛かりな修正に発展しかねません。エンジニアの労力を削減するためにも、importantの使用は最低限に抑えておきましょう。

importantを使うべきタイミング

importantを使うべきタイミングは、もともと用意されているCSSが編集ができない、あるいは編集すると不具合が出そうなソフトを使うときです。たとえばGoogleカスタム検索では、既存のCSSは編集できません。

別のプロパティを反映させたい場合、編集とは別の方法でプロパティの優先順位を上げる必要があります。その際にimportantを使うことで、既存のCSSを編集することなく反映させるプロパティを記載することが可能です。またWordPressといった、既存のCSSを編集すると不具合が起きそうなソフトを使う際も活用できます。

CSSの優先順位

前の章では、importantを多用しないためにはCSSの仕様を用いて優先順位をつける必要があることを解説しました。実際にCSSでは、ある要素に基づいて優先順位が決定されています。その要素とは以下の3つです。

• 読み込み順番
• セレクタ
• 詳細度

同じ種類のコードでも、上記の要素をもとに高い優先順位をつけられたものが実際に反映されます。したがって、これらの仕組みを理解しておくことで、importantを多用せずとも反映したいコードをコントロールできるということです。補足として、importantはどの要素よりも優先順位が高く設定されています。

読み込み順番

CSSでは、上から下にかけてコードが順番に読み込まれます。同じ種類、条件で書かれたコードを比べた場合、あとから読み込んだコードが優先的に反映される決まりです。

つまり、下に書いてあるコードほど優先順位が高くなります。たとえば、以下のようにコードがあったとします。

文字の大きさを指定する「font-size」が2つ指定されていますが、この場合、下のコードが反映されるのが通常です。つまり、文字の大きさは15pxになります。もちろん、15pxを指示しているコードの下に、文字の大きさを指定する別のコードがあればそちらが優先されます。

セレクタ

CSSにおけるセレクタとは、以下のコードの「p」の部分です。

セレクタには以下のように種類があり、上に書かれているセレクタほど優先度が高くなります。

• important
• インラインスタイルシート形式
• idセレクタ
• classセレクタ
• 要素セレクタ
• ユニバーサルセレクタ

importantを除いて、ほかのどの要素よりも優先的に反映されるのがインラインスタイルシート形式です。インラインスタイルシート形式とは、CSSではなくHTMLタグ内に直接指定を書く形式を指します。

続いて優先順位が高いのが、属性を指定するidセレクタとclassセレクタです。classセレクタよりもidセレクタの方が優先されます。

次に優先されるのが、要素セレクタです。「h1」や「p」といった、属性や属性値を指定しないセレクタを指します。

そして、優先順位が最も低いのがユニバーサルセレクタです。ユニバーサルセレクタとは、すべての要素に反映されるセレクタです。

このように、CSSではセレクタの種類によって優先順位が異なります。うまく活用することで、importantを使わずに順位づけを行えるでしょう。

詳細度

前の節で、idセレクタ、classセレクタ、要素セレクタの3つの優先度を比べました。厳密に述べると、これらのセレクタは詳細度によって優先順位が決まっています。

CSSでは、詳細度が大きいほど優先順位が高くなるのが基本です。詳細度は3桁の数字で表され、3桁目の数字が大きいほど優先度は高くなります。

なお、3桁目の数字が同じ場合は、2桁目の数字が大きい方が高優先度になります。1桁目でも同様です。計算方法としては以下のとおりです。

• 要素セレクタ1つにつき1桁目の数字が1つ増える
• classセレクタ1つにつき2桁目の数字が1つ増える
• idセレクタ1つにつき3桁目の数字が1つ増える

たとえば「div span h2{…}」というセレクタの場合、要素セレクタが3つあるので、詳細度は「0.0.3」となります。一方「#sample .test {…}」というセレクタの場合、idセレクタとclassセレクタが1つずつあるので、詳細度は「1.1.0」です。上記の2つのコードを比べると、後者の方が詳細度が大きいので、後者のコードが優先されます。

なお、どれだけ多くのセレクタが書かれていても、桁が繰り上がることはありません。要素セレクタが10つあったとしても、詳細度は「0.0.10」になるので注意しましょう。

importantの使い方

実際にimportantを使う際は、先頭に「!」をつけて、プロパティと値の後ろに記載しましょう。たとえば以下のとおりです。

プロパティとは「color」の部分を指し、値とは「red」の部分を指します。上記のコードでは、値とimportantの間を半角の空白で開けていますが、必ずしも空白を設ける必要はありません。しかし、空白を設けることでコードが見やすくなるという点が長所です。

importantの解除

importantを解除する方法は3つあります。1つ目は、importantを二重にする方法です。importantが記載されたコードを比べた場合、importantを除いたときのコードで優先度が比較されます。

2つ目は、initialを使ってスタイルを解除する方法です。initialは、スタイルをデフォルトの状態に戻す効果を持っています。

3つ目は、importantを削除する方法です。importantを解除したい箇所を探して削除すれば、importantの効果はなくなります。削除することでほかのコードに影響を及ぼすケースもあるので、調整しつつ削除しましょう。

importantが効かないときに確認すべきポイント

importantが効かないときに確認すべきポイントは以下の3点です。

• 優先度が競合していないか
• importantの使用方法を誤っていないか
• スペルミスがないか

優先度が競合していないか

優先度が同じコードがないかを確認しましょう。仮にimportantを記載しても、同じ種類のほかのコードにimportantが記載されていれば優先度が競合します。

くわえて、ほかのコードの方が下部に記載されている、または詳細度が高ければ、そちらのコードが優先されるでしょう。解決するためには、importantを効かせたいコードの優先度や詳細度を上げるか、別コードのimportantを削除してください。

importantの使用方法を誤っていないか

importantが効かない場合、使い方を誤っているケースもあります。そのため、以下の3点について確認しましょう。

• 「;」の後に記載していないか
• プロパティの前に記載していないか
• プロパティ単位で記載しているか

以下のようにimportantは、値と「;」の間に記載する必要があります。

「;」の後に記載すると、正常に効きません。なお、プロパティ(color）の前に記載しても正常に効かないので注意しましょう。

また、importantは以下のようにプロパティ単位で記載してください。

1つのプロパティにしか記載していないと、そのプロパティにしか効かなくなります。複数のプロパティがある場合は、その分だけimportantを記載しましょう。

スペルミスがないか

スペルミスがないか確認しましょう。スペルミスをすると正常に効きません。

間違えやすい要素としては「m」と「n」の混同です。「inportant」「importamt」「inportamt」はすべて間違いなので注意しましょう。

また、先頭の「i」は小文字です。大文字の「I」と似ているので、その点も踏まえてチェックしてください。

「!」を忘れていないかもチェック

importantを使う際は、先頭に「!」をつけなければいけません。小文字の「i」と似ているので、流し見ではついているか否か確認できないことがあります。よく確かめて「!」の脱字を防ぎましょう。

なお「!」は全角ではなく半角です。「！」のように全角になっている場合は、半角の「!」に修正してください。

合わせて読みたい

【HTML・CSS】表作成の基本から装飾方法までコード付き解説

HTMLでの表作成は、指定できることが多くてコードも複雑に見えるため、抵抗感のある方も多いのではないでしょうか。HTMLの中身を知れば知るほど、使い方に悩んでしまいます。
タグの使い方が多数あるHTMLは動作の基本をひとつずつ抑えれば、表作成もスムーズにこなせます。デザインが豊富なレイアウトも、CSSを使用すれば複雑になりません。

まとめ

importantとは、コードの優先順位を上げるときに使います。非常に効果が強いので、多用すると本当に優先順位を上げたいコードが現れたときに手間がかかってしまうでしょう。そのため、CSSの仕様による順位づけを活用して、importantの多用を防ぐことが重要です。

なおテクノデジタルでは、importantをはじめ、CSSやHTMLに関するお悩みを解決いたします。知識が豊富なスタッフが対応させていただきますので、お気軽にお問い合せください。