CSSに同じclass名がいっぱい‥。どれが最優先されますか？

質問

貰ったCSSファイルがありますが、同じclass名が無数にあります。
.abc {
*****:+++;
}

.def .abc {
*****:+++;
*****:+++;
}

.abc {
*****:+++;
}

こんな感じで、同じclassが10以上ある時もあります。
これらを触りたい時、一体どれを触れば正しく反映されるのかお教え頂けませんでしょうか。
（一番最後のが反映される、など）

また、同じclassはひとつにまとめた方が管理上便利かと思うのですが、そうでもないのでしょうか。

どうぞ宜しくお願い致します。

回答No.2

ICHI-yan · ベストアンサー

整理はされた方が管理が楽です。自分ルールはやっているうちになんとなく出来ていくみたいですが。
１さんの言うように、正確には仕様書が一番なのですが、とっつき悪いのでなんとなくわかったような気になるページを紹介しますね。
http://www.stylish-style.com/csstec/base/order.html

簡単にいうとポイント制で得点の高い値が表示されます。誤解を恐れずにいうと限定されればされるほどポイントが高くなるような配点になっているようです。全称セレクタより部分、部分の中のclassよりidの方が限定される。って具合。で、同じ得点なら後ろが反映されるって具合です。

お礼

これまた分かりやすく重宝しそうです。確かに分かった気になれそうです（＾＾；

しばらくはICHI-yan様のこのサイトを参考に、着実に習得していければと思います。

ありがとうございました！

回答No.1

himajin100000

http://www.w3.org/TR/CSS21/cascade.html

6.4.1 Cascading order
カスケードの順序

該当するmedia typeに適用されるプロパティを

優先度高

!importantが書かれているユーザースタイルシート
!importantが書かれているページ製作者スタイルシート
!importantが書かれていないページ製作者スタイルシート
!importantが書かれていないユーザースタイルシート
ブラウザ等のユーザーエージェントのスタイルシート

優先度低

プロパティの値は以下の順で優先度が決められる
http://www.w3.org/TR/CSS21/cascade.html#specificity

●style属性によって指定されている宣言にはaを1、指定されていないものはaを0とする。

●セレクタ中に含まれるIDセレクタ(#)の数を数え、bとする。

●セレクタ中に含まれるIDセレクタ(#)以外の属性および擬似クラスの数を数え、cとする
●セレクタ中に含まれる要素名および擬似要素の数を数え、dとする

p[id=p33]のような指定のものはたとえ使われているのがDTD上でID型の属性として定義されていたとしてもcに含める。

a>b>c>d の順で優先される(aが同じならbが大きい方が優先,aもbも同じならcが大きい方が優先・・・・)

したがって、上記URL中のソースではP要素の背景は緑色になる

●優先度が同じになってしまった宣言については後に書かれた宣言が優先される

●@importで読み込まれたスタイルシートファイルについては，そのファイル中の宣言は，読み込み元のスタイルシートのすべての宣言の前に書かれているものとして扱われる。
=======
以上，W3C CSS 2.1
6.4 The cascade
6.4.1 Cascading order
6.4.2 !important rules
6.4.3 Calculating a selector's specificity

を私訳

お礼

もの凄く丁寧にご回答頂き、ありがとうございます。
今CSSを猛勉強中なので、ぜひ参考にさせて頂ければと思います。

本当にありがとうございました。