CSS命令を適用する範囲である「セレクタ」には優先順位があります。
これが分かっていないと、「きちんとセレクタを指定しているはずなのに、
思ったようにスタイルが適用されない」ってなことになって、ドツボにはまります。
私も、世に公開されているWordPressテーマのデザインをカスタマイズしよう
としたときに、長くて汚いポリシーの見えにくいCSSの場合は発狂しそうになりました。
ですので、一からWordPressテーマを作成する際には、予めきちんとした
ポリシーのCSSを考えておく方が後々の変更がしやすいでしょう。
セレクタの種類(詳細)
先の記事 「セレクタの種類」 でも触れたように、セレクタには大別して
・HTML要素による指定
・クラス名による指定
・ID名による指定
・クラス名による指定
・ID名による指定
がありますが、もっと細かく分類するとこれに加えて
・すべての要素が対象となる全称セレクタ(*で指定)
・特定の属性を持つ要素が対象となる属性セレクタ(「a target」等)
・特定の状態を持つ要素が対象となる疑似クラス(「a:link」等)
・要素への直接指定(HTMLに「style=””」で直接記述することで指定)
・特定の属性を持つ要素が対象となる属性セレクタ(「a target」等)
・特定の状態を持つ要素が対象となる疑似クラス(「a:link」等)
・要素への直接指定(HTMLに「style=””」で直接記述することで指定)
等々があります。
詳しくは HTMLクイックリファレンス：セレクタの種類－CSSの基本 を参考に
セレクタの優先順位
上記「セレクタの種類(詳細)」で挙げたセレクタの強さは以下のようになります。
※数字が大きい程強い
1. 全称セレクタ(*)
2. HTML要素セレクタ(タグ)
3. クラス名セレクタ(.)
3. 属性セレクタ(「a target」等)
3. 疑似クラス(「a:link」等)
4. ID名セレクタ(#)
5. 要素への直接指定(style=””)
2. HTML要素セレクタ(タグ)
3. クラス名セレクタ(.)
3. 属性セレクタ(「a target」等)
3. 疑似クラス(「a:link」等)
4. ID名セレクタ(#)
5. 要素への直接指定(style=””)
セレクタの強さが同じ場合は、最後に指定したスタイルが優先されます。
また、セレクタが階層(入れ子)構造になっている場合、
最下層のセレクタを単独で指定するよりも、
子孫セレクタ(上位セレクタ[スペース]下位セレクタ)のように
階層構造まで指定したセレクタの方が強くなります。
ID名は同じHTMLページでは1度しか使えませんが、
クラス名は同じHTMLページでも何度も使うことができます。
子孫セレクタを指定してガチガチにスタイルを指定しておくと、
レイアウト構成を変更して階層構造が崩れた場合には
スタイルまでガラっと変わってしまいます。
そのあたりを考えた上で、使い分けをすると便利かと思います。
SmartStyle