CSSの個別性について

私はフロントエンドとして日々業務に追われています。

基本的には個人での作業なのですが、共同でコーディング作業を行うということもあります。

その場合、作業の規則を設けていないと、つまずくことがあります。

CSSファイルに定義しているのに効かない

プロパティを間違えているわけでもなく、見直しても問題ないのに機能しない…ということが稀にあります。

そういった場合には、諸々思わぬ原因が潜んでいるやもしれません。

個別性

CSSを適用する場合、様々な記述方法があり、それにより優先されるスタイルが変わります。

1div {color: #000;}
2div {color: #F00;}
3

ごく単純に上記のように書くと、基本的には後に記述された「color: #f00;」が優先され適用されます。

しかし、下記のように記述すると

1div.text {color: #000;}
2.text {color: #F00;}
3

後から記述されたスタイルではなく、上の「color: #000;」が優先されます。

こうなる理由は、セレクタには個別性というものが決められており、

その個別性を計算し、優先されるスタイルが適用されるからです。

個別性の計算

セレクタにはidやclassなどを様々に設定し、適用させることができます。

そして、セレクタには個別性の優先度があり、それを計算した上でスタイルが適用されます。

計算の値をまとめると下記の通りです。

• タグに直接style属性がある場合は、1000
• idセレクタは、100
• id以外の属性と、擬似クラスは、10
• 要素、擬似要素は、1

これを値を基に下記のコードを考えると、

1div.text {color: #000;}
2div {color: #F00;}
3

• 「div.text」： 1 + 10 = 11
• 「.text」： 10

となるので、先に記述された「color: #000;」が優先され適用されます。

まとめ

個別性については、キチンと把握するには計算の値も覚えておくべきなのかもしれませんが

上記のように、最初に作業チーム内でCSSの記述ルールを設けておけば

そこまで気にしなくても思った通りのデザインにできると思います。

もし、CSSに記述したスタイルが効かないという状況があれば、今回の記事が解決に繋がるかもしれません。

追記

今回この記事を書くに至ったのは、自分の備忘録というのもあるのですが、

業務でどうしてもスタイルが効かないという状態に陥ったからです。

ですがその原因は、無理やりスタイルを適用させるため、

ほぼ全てに”!important”が付けられていたというオチで、個別性とかは関係ありませんでした…

楽ではあるのですが、”!important”は個別性など関係なく最優先されるので、

多用するのもよろしくないなと思いました。