Web Survive

Webで生きる道を模索するブログ

スタイルの優先順位

スタイルの適用対象が競合している場合、
「詳細度」「読み込み順序」という
2つのルールによって優先順位が決定されます。
これらの仕組みを「カスケード処理」(Cascading)といい、
CSSという名前の由来にもなっています。
また、CSSに特徴的な「継承」という仕組みも押さえておきましょう。

スタイルの詳細度

詳細度は
「一般的なスタイルよりも個別的なスタイルが優先される」というルールです。
ユニバーサルセレクタは影響せず、
タイプセレクタ(要素名)よりもクラスセレクタや属性セレクタが、
さらにIDセレクタが優先されます。

スタイルの詳細度

css-priority-specificity

詳細度

「特殊性」「特異性」「個別性」と呼ばれることもあります。
英語では「specificity」です。

ユニバーサルセレクタは「すべての要素に」という意味であり、
適用対象を何ら特定していません。
タイプセレクタはHTMLで利用できる要素名であり、
ユニバーサルセレクタよりも個別的です。
クラスセレクタや属性セレクタは、
制作者が自主的に指定した属性や属性値をもとにスタイルを適用するため、
単なる要素名だけよりも個別的です。
さらに、IDセレクタはページ内で1つしか指定できない
id属性値を参照する非常に個別的な存在ですので、
クラスセレクタや属性セレクタよりも優先されます。
おおまかに、
「より細かなセレクタほど優先的に適用される」と覚えておきましょう。

スタイルの詳細度イメージ

css-priority-specificity-image

少しややこしく感じるかもしれませんが、
「指定したスタイルがうまく適用されない」といった問題が発生した場合は、
この「詳細度」が原因になっていることが多いものです。
何か問題が起こったら、まず「詳細度」を疑ってみる
(いま書いたスタイルの詳細度が、すでにあるスタイルの詳細度よりも強いかどうか考えてみる)のが大切です。

なお、HTMLでは要素に「style属性」を指定することも認められています。
CSSのソースコードからスタイルを適用するのではなく、
属性値としてスタイルを直接指定することができるのです。
たとえば「」と記述します。

style属性の詳細度は「1, 0, 0, 0」とされており、
ID(0, 1, 0, 0)やクラスや属性(0, 0, 1, 0)、
要素名(0, 0, 0, 1)よりも優先的に適用されます。
ただし、style属性を多様してしまうと
サイト全体でCSSを一括管理できなくなってしまうので、
「使わないのが原則」と考えてください。

スタイルの読み込み順序

読み込み順序は「詳細度が同じスタイルについては、
あとから読み込んだスタイルが優先される」というルールです。
たとえば「p {color:blue}」と「p {color:green;}」というスタイルがある場合、
あとに書かれているほうが優先的に適用されます。

このルールは、kink要素や@importでCSSファイルを読み込む際にも適用されます。
ソースコード上であとに書かれた(あとに読み込まれる)ファイルが優先されます。
「上書き」と考えておくとよいでしょう。

CSSのソースコードのなか

link要素で読み込むCSSファイル

@importで読み込むCSSファイル

スタイルの継承

CSSには、ある要素に適用したスタイルは
子要素に自動的に引き継がれるという特徴があります。

この仕組みを継承といい、ほとんどのスタイルが自動的に引き継がれます。

スタイルの継承

css-priority-inheritance

“明示的”な継承

プロパティの値に「inherit」と指定することで、
継承しないプロパティを継承するよう明示することもできます。
(ほとんどのプロパティで指定可能)。