🍇

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

2021/12/12に公開約1,800字

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"> #...優先度が1番目に低い
    <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

ログインするとコメントできます