セレクタ

HTMLのある要素にCSSを用いてスタイルを適用する時にセレクタを用いて指定をするわけですが,このセレクタには沢山の種類があります。

<!-- HTML -->
<span id="hikakin", class="maxmurai">これが大人の10コンボや!</span>
/* CSS */
#hikakin{
    color:purple;
}
.maxmurai{
    color:red;
}
span {
    color:black;
}

シンプルなセレクタは上の3つ.

#hikakinはidでの指定,.maxmuraiはclassでの指定,spanはタグ要素でのスタイルの指定.

この例のように,複数のセレクタがマッチし,同じ要素に対して複数のスタイルを適用としようとしてスタイルの競合が生じた場合,個別性(specificity)の高いスタイルが優先的に適用されることになっている.

この場合,どれが一番優先度が高いスタイルになるのでしょうか???

正解は,#hikakinです.同じid名を持つ要素はHTMLで繰り返し出ることはないので一番個別性が高く,優先度も一番高いものとなります.世界のHIKAKINはマックスむらいより強いという結果になりました.

もちろん,セレクタは他にも沢山種類があります.

idは100,classは10,要素指定は1という重み付けをして足し算を行い,一番数値が高いスタイルが適用される仕組みになっています.

個別性の計算方法などの詳しい説明は以下を参照してください(丸投げ)

http://zero.css-happylife.com/basic/specificity.shtml

CSSの個別性は,大規模なサイトを作る際やサイトを拡張する際に,スタイルが上書きできないといった問題に悩まされる問題の原因となります.特にIDセレクタは個別性が非常に高く評価されるため,CSS設計技法のいくつかは,IDセレクタの使用を禁止したり,限定的に使うことを勧めています.

詳しくないですが,OOCSS,BEMは使わない感じで,SMACSSは限定的に使うだけにしようって感じだそうです.(本質はidを使うか使わないかじゃないけれど)