CSSの特異性と新CSS３のセレクタ大解説！プログラマーなら理解しておこう！

CSSの特異性について、特に新しいCSS3のセレクタについてまだよく掴めていない方もいらっしゃるようです。

 

 

特異性とは、2つ以上の宣言が、競合するプロパティの宣言を持つ同じ要素に適用される場合にどちらが優先されるのか、ということです。

通常は最も明確なセレクタが優先されます。特異性が同等の場合は後ろにある方が優先されることになります。CSSの特異性を理解することで、ブラウザがどのように優先度を決定しているのかをより深く理解することができるでしょう。

 

 

まずはこちらの例を見てください。

 

 

もしCSSに詳しいのであれば、次の3行のコードの特異性についても恐らくご存知でしょう。

 

 

このブロックには3つのスタイルルールが含まれています。もし順番だけが重要であるならば、段落は黄色となるでしょう。しかし、異なるセレクタは別々のウェイトを持っています。IDはクラスセレクタより高い優先度を持ち、クラスセレクタはタイプセレクタより優先度が高くなります。そのため、この場合では段落は赤色になるのです。

 

 

 

CSS3では順番がより重要となります。次の例を見てください。

 

 

この3つの場合には、ウェイトがどれも同じとなります。そのため、記述する順番によって結果が決まることとなります。

 

 

 

・CSSにおけるセレクタによる優先度

1. 1.!important:これが付いている場合には優先度は最も高くなります。もし同じ要素に!importantのついた宣言が複数存在している場合には、他のルールに従い優先度が決定されます。
3. 2.style=””:要素にstyle属性が含まれている場合、インラインのスタイルが優先され、外部もしくは埋め込まれたスタイルシートは!importantがない限りはより低い優先度となります。JavaScriptのstyleプロパティがインラインのスタイルを生成している場合には、style=””のウェイトは1-0-0-0となります。
5. 3.id:実際に使うであろうセレクタの中では、idが最も高い優先度となります。ウェイトは1-0-0です。
7. 4.class/psudo-class/attributes:先ほどの2つ目の例で取り上げた、クラスセレクタ、属性セレクタ、疑似クラスはどれも0-1-0のウェイトとなります。
9. 5.type::first-letterや:afterなどの要素タイプセレクタや疑似要素は0-0-1と最も低いウェイトとなります。

 

2つ以上のセレクタが同じ優先度となる場合には、後に配置されているものが優先されます。

 

 

 

このように、CSSの特異性にはしっかりとしたルールが存在しています。そこまで複雑なものではありませんから、この機会に覚えてしまいましょう。

 

 

 

 

※本稿は 「CSS Specificity」を翻訳・再編集したものです。