CSSの優先順位

現在、勤怠関連のシステムをWebでデザインしています。

CSSのボーダーラインやファーカスが思ったとおりに適用されないのでスクールへQAにいきました。

スクールはKENスクールに通っています。

以下の指摘がありました。

CSSの各セレクタには強さがあって、その強さ次第では、後に記述したセレクタよりも、CSSの先に(上部)に記載しているセレクタが有効になるというのです。

CSSのセレクタの優先順位のポイント

ポイント1:

プログラムと同じで、上部から下部へセレクタが有効になる。

ポイント2:

セレクタによって、強さが決まっている。

強い―――――――――――――――――――――→弱い

id(#) > class(.) > 要素(タグ) > 全称(*)

そして、各セレクタの強さの優劣をポイントで判別しています。

テキストで習いましたが、いざ、実際の制作となると気づきませんでした。

「common.css」などで、共通的にセレクタを定義しています。

この共通的なセレクタはclassや要素で記述していることが多いので、他の個別のCSSでidタグがあるときかなくなってしまいます。

問題もすっきり解決されてよかったです)^o^(

■参考URL

CSSの優先順位

はじめてのCSS

スタイルシートの class と id の使い分け