Zenn
🍇

cssの詳細度についてわかったこと！

2021/12/12に公開
CSS
初心者
tech

CSS の詳細度

css には詳細度があり、意識していないと 意図していないスタイルになってしまいます。

以下のような html を例にあげて行きたいと思います。

親要素のクラスに対して CSS を記載した場合


<body>
<div class="pearent">
    <span id="first" class="cls">こんにちは！ 日本！</span>
    <span>こんにちは！ 日本！</span>
</div>
</body>

.pearent {
    color: blue;
}

span タグの親である pearent クラスに対してフォントの色を変えています。 この時ブラウザー上では

\textcolor{blue}{こんにちは！ 日本！}\textcolor{blue}{こんにちは！ 日本！} と表示されているはずです

span タグに対して CSS を記載した場合

.pearent {
    color: blue;
}

span {
    color: red;
}

ブラウザー上では

\textcolor{red}{こんにちは！ 日本！}\textcolor{red}{こんにちは！ 日本！} と表示されているはずです これは pearemt クラスの css より span の方が詳細度が高いため span
タグの css が適応されています。

span タグのクラスに対して CSS を記載した場合

.pearent {
    color: blue;
    font-weight: 600;
}

span {
    color: red;
}

.cls {
    color: orange;
}

ブラウザー上では

\textcolor{orange}{こんにちは！ 日本！}\textcolor{orange}{こんにちは！ 日本！} と表示されているはずです span タグの中にクラスをある場合はクラスが優先されます。

span タグの id に対して CSS を記載した場合

.pearent {
    color: blue;
    font-weight: 600;
}

span {
    color: red;
}

.cls {
    color: orange;
}

#first {
    color: purple;
}

ブラウザー上では

\textcolor{purple}{こんにちは！ 日本！}\textcolor{purple}{こんにちは！ 日本！} と表示されます。 同じ span タグの中にクラスと id が競合している場合は id
の方が詳細度が高くなります。

上記はまとめると


<div class="pearent"> #...優先度が１番目に低い
    <span id="first" class="cls">こんにちは！ 日本！</span>
    #...クラスは優先度が3番目に低い
    <span>こんにちは！ 日本！</span>#...優先度が2番目に低い

span タグ（id 付き) > span タグ(クラス) > span タグ > 親要素 pearent クラス の順番になります。

親要素 > 子要素に指定した場合

.pearent span {
    color: black;
}

ブラウザー上では \textcolor{purple}{こんにちは！ 日本！}こんにちは！ 日本！

と表示されているはずです 2 つめでできた span タグよりも親要素 > 子要素に指定した場合の方が 詳細度が高くなる。

span {
    color: red;
}

.pearent span {
    　 #こっちの方が詳細度が上
    color: black;
}

ブラウザー上でどの css に対してスタイルが適応されているかわからなくなったら 検証用ツールで適宜確認する癖をつけて行くようにするようにしましょう！

Discussion