cssを扱う上で、押さえておかないといけないことに「詳細度（Specificity）」があります。cssの特異性ともいわれているセレクタの記述に関する優先順位の概念です。
cssが指定される時の優先順位には、下位に記述されたセレクタが優先になります。従って同じセレクタを書いてしまっても、行が下に書かれたセレクタが上位のセレクタを上書きしてしまうため、下位の位置に書かれたセレクタの方が適用されます。
|
1 2 |
h1 { color: black;} h1 { color: red;} |
ただし、これを「CSSの詳細度」で覆すことができます。下記がその詳細度の低い順に並べたものです。
- 要素型セレクター（h1やpなどのタグ）、疑似要素（:before、:afterなど）
- クラスセレクター（.クラス名)、属性セレクター（[type=”radio”]）、疑似クラス（:hover、:first-childなど）
- IDセレクター（#ID名）
（*）全称セレクター、（+、>、~、’ ‘、||）結合子、（:not()）否定疑似クラスは詳細度に影響を与えません。（但し、 :not(:first-child) の中で宣言されたセレクターは影響を与えます。）
詳しくはイラストで楽しく解説したサイトがあります。「Specifishity :: Specificity with Fish」をご覧ください。
HTML上に記述されるインラインスタイル（style=”font-weight: bold;”）では、常に外部スタイルシートの中のスタイルを上書きしますので、最も高い詳細度になると考えられます。
ただし、上記の条件を全て覆してしまうのが「!important」です。これが宣言リストのどこにあっても、CSS内で作られたその他の宣言を上書きします。技術的には「!important」は詳細度とは無関係なことになり直接作用します。これによって、CSSの自然のカスケードを破壊するためデバッグなどの修正や検証が困難になります。「!important」の使用は避けて、しっかりとしたCSSを設定しましょう。