記事一覧

セレクタの優先順位

 posted by suzu
CSSの基礎知識

CSS命令を適用する範囲である「セレクタ」には優先順位があります。
これが分かっていないと、「きちんとセレクタを指定しているはずなのに、
思ったようにスタイルが適用されない」ってなことになって、ドツボにはまります。

私も、世に公開されているWordPressテーマのデザインをカスタマイズしよう
としたときに、長くて汚いポリシーの見えにくいCSSの場合は発狂しそうになりました。
ですので、一からWordPressテーマを作成する際には、予めきちんとした
ポリシーのCSSを考えておく方が後々の変更がしやすいでしょう。
 

セレクタの種類(詳細)
先の記事 「セレクタの種類」 でも触れたように、セレクタには大別して

・HTML要素による指定
・クラス名による指定
・ID名による指定

がありますが、もっと細かく分類するとこれに加えて

・すべての要素が対象となる全称セレクタ(*で指定)
・特定の属性を持つ要素が対象となる属性セレクタ(「a target」等)
・特定の状態を持つ要素が対象となる疑似クラス(「a:link」等)
・要素への直接指定(HTMLに「style=””」で直接記述することで指定)

等々があります。
詳しくは HTMLクイックリファレンス:セレクタの種類-CSSの基本 を参考に
 

セレクタの優先順位
上記「セレクタの種類(詳細)」で挙げたセレクタの強さは以下のようになります。
※数字が大きい程強い

1. 全称セレクタ(*)
2. HTML要素セレクタ(タグ)
3. クラス名セレクタ(.)
3. 属性セレクタ(「a target」等)
3. 疑似クラス(「a:link」等)
4. ID名セレクタ(#)
5. 要素への直接指定(style=””)

セレクタの強さが同じ場合は、最後に指定したスタイルが優先されます。
また、セレクタが階層(入れ子)構造になっている場合、
最下層のセレクタを単独で指定するよりも、
子孫セレクタ(上位セレクタ[スペース]下位セレクタ)のように
階層構造まで指定したセレクタの方が強くなります。
 

ID名は同じHTMLページでは1度しか使えませんが、
クラス名は同じHTMLページでも何度も使うことができます。
子孫セレクタを指定してガチガチにスタイルを指定しておくと、
レイアウト構成を変更して階層構造が崩れた場合には
スタイルまでガラっと変わってしまいます。
そのあたりを考えた上で、使い分けをすると便利かと思います。

関連記事

eyecatch_css

ブロックレベルとインライン

CSSでデザインする際に、HTMLタグ要素が ブロックレベル要素であるかインライ...

記事を読む

eyecatch_css

セレクタの種類

WordPressに限った話ではないですが、CSSを使ってページデザインする際に...

記事を読む

eyecatch_css

width プロパティの適用範囲

CSS でデザインをしていく際には、(特にボックスに対して) width プロパ...

記事を読む

カレンダー

2019年4月
« 7月    
 123456
78910111213
14151617181920
21222324252627
282930  
PAGE TOP ↑