CSSの優先順位?詳細度が原因かも 適用ルール解説

画像:CSSのが効かない?詳細度の適用ルールを解説

CSSを勉強し始めた人が良く悩むのが、CSSが効かない理由を特定出来ない事です。CSSが効かない時の理由は幾つかありますが、大きな理由の1つに優先順位があり「詳細度」と言います。

ただ単純にclassやid、セレクターなどを正しく使ったからといって上手く適用されるとは限りません。

「詳細度」はCSSの適用ルールの1つで重み付けをするもの。

この重み付けを理解する事で、効率的にスタイルを掛ける事が出来るうえ、CSSが効かない時の原因も特定出来る様になります。

CSSの重みづけをする詳細度とは?

図解:セレクターの詳細度スコア解説
セレクターの詳細度スコア

CSSのスタイル適用ルールの1つとして「詳細度」があります。
そもそもCSSにはスタイルの適用順があり、知らないと気付かすに全く別の所を上書きしてしまっていたなんて事が起きてしまいます。

CSSの詳細度とは?
詳細度は CSSの宣言が適用される際の重みづけの事。セレクターの種類と数で決まります。同じ詳細度であれば通常通り最後に宣言されたものが要素に適用されます。

詳細度を決めるルールは?

セレクター毎に重み付けをするためのスコアが設定されています。詳細度は4 つの異なる値(「1000の位」「100の位」「10の位」「1の位」)に対してセレクターの数だけスコアが加算されていきます。

  1. style属性。HTMLのタグ内にstyle属を書く為セレクターがありません。なので常にスコア「1000」です。
  2. ID セレクターは「100」がスコアされます。
  3. CSSファイル内のクラスセレクター・属性セレクター・擬似クラスは、「10」がスコアされます。
  4. CSSファイル内の要素セレクターまたは疑似要素には、「1」がスコアされます。

style属性は「1000」という考えは古いから違うんだっていう意見もありますが、それは本質ではありません。学術研究ではありませんので、詳細度の理解を助けるという意味では今も十分有効な考え方です。

大事な事は、直接HTML内に記述してあったり、よりピンポイントな指定程スコアが高くなるという事。また、セレクターが複数指定してあればその分スコアが加算されていきます。

例)セレクターの詳細度スコア表
セレクター 1000 100 10 1 詳細度の合計
* 全称セレクタ 0 0 0 0 0000
h1 要素セレクター 0 0 0 1 0001
p::first-letter 要素と疑似要素 0 0 0 2 0002
li:hover 要素と疑似クラス 0 0 1 1 0011
.sample クラス 0 0 1 0 0010
#identifier id 0 1 0 0 0100
style属性 1 0 0 0 1000

CSSファイル以外にもCSSを書けるの?

通常CSSは専用のファイルを作ってそのファイル内でスタイルを書きますが、HTML側に直接CSSを指定したりファイルを複数読み込ませる事も出来ます。

CSSの各指定方法は以下、

  1. CSSファイル内にスタイルを記述
  2. HTMLのheadタグ内にCSSファイルを読み込ませる
  3. HTMLの要素内に直接スタイルを記述
  4. 詳細度関係なく上書きする記述

色々な所にCSSを書く事が悪であるとは言いませんが、詳細度が変わり「思いがけずCSSが効かない」って時の理由だったりします。

① CSSファイル内でのスタイル記述とルール

CSSファイル内にスタイルを書く際の基本ルールとして、同じ要素に対して先に指定したスタイルが後から指定したスタイルで上書きされます。

図解:CSSの宣言上書きルール
CSSファイル内での要素の宣言上書きルール

② HTMLのheadタグ内にファイルを読み込み

CSSファイル内の書き方と同じく、CSSファイルの読み込み順(上から下へ)によってもスタイル適用が変わります。

① <link rel="stylesheet" href="https://fueru.info/style01.css" type="text/css" media="all">
② <link rel="stylesheet" href="https://fueru.info/style02.css" type="text/css" media="all">

style01.cssと同じ要素へのスタイル指定の場合、後から書いたstyle02.cssで上書きされます。

③ HTMLの要素内に直接スタイルを記述

図解:スタイル属性の詳細度の説明
スタイル属性の詳細度の説明

CSSの規則として直接スタイルの対象となった要素は常に優先されます。その為、style属性の詳細度の重み付けは大きく設定されています。

④ 詳細度関係なく上書きする記述

図解:スタイルの詳細度 important指定の説明
スタイルの詳細度 important指定の説明

詳細度の計算やCSSの記述場所などの説明をしましたが、それらの計算を無効にしてしまう特別な指定方法が「!important」です。

特別といっても便利に都合よく使ってよい物ではありません。

通常のルールを無視してしまう為、不用意に使うと意図せずスタイルが適用されたり、無効になってしまいます。

「!important」を上書きするには、同じかそれ以上の詳細度で「!important」を上書きするしかありません。

まとめ

今回はCSSの詳細度について解説しました。ルールなど、理屈が分かると理解が早まりますよね。

CSS詳細度の注意点おさらい

  1. セレクターの適用ルールにはスコアでの重み付けがある。
  2. セレクターの適用はCSSファイルの読み込み順でも変わる。
  3. 「!important」は不用意に使わない。

CSSの勉強のお役に立てると嬉しいです。

HTMLもCSSも時間は掛かりますが独学で習得出来ます。効率的に習得するならスクールも有りだと思いますよ。

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!
画像:Webデザイナーを目指す!おすすめオンラインスクールと選び方