下記の例では、.contents クラスの .message-list クラスの .message クラスの中の p に対して color:black のスタイルを指定しています。コメントはグレーで表示したいので、.comment p に color:gray を指定していますが、前者の方が 優先度 が高いため、color:black で表示されてしまいます。
.contents .message-list .message p { color: black; } /* 優先度が高い */
.comment p { color: gray; } /* 優先度が低い */
<div class="contents">
<div class="message-list">
<div class="message">
<p>Message...</p>
<div class="comment">
<p>Comment...</p> /* color:black が適用されてしまう */
</div>
</div>
</div>
</div>
無暗に !important を使うことは推奨されていません。優先度を高めようとすると次の様になりますが、メッセージリストだけではなく、アイテムリストやサンプルリストのコメントにも適用しようとすると大変になります。
.contents .message-list .message p { color: black; }
.contents .message-list .message .comment p { color: gray; }
ここで登場するのが CSSカスケードレイヤー です。上述の CSS を、default レイヤーと comment レイヤーに分けます。default や comment などのレイヤー名には自由な名前をつけることができます。comment レイヤーの方が default レイヤーよりも後に定義されているので、優先度 の判定よりも comment レイヤーの方が優先され、color:gray で表示されるようになります。
@layer default {
.contents .message-list .message p { color: black; }
}
@layer comment {
.comment p { color: gray; }
}
レイヤー間の優先度は次のように書くこともできます。@layer comment { ... } より @layer default { ... } の方が後に記述されていますが、@layer default, comment; で後に記述された comment レイヤーの方が優先されます。
@layer default, comment;
@layer comment {
.comment p { color: gray; }
}
@layer default {
.contents .message-list .message p { color: black; }
}
下記の様に記述することもできます。
@layer default;
@layer comment;
@layer comment {
.comment p { color: gray; }
}
@layer default {
.contents .message-list .message p { color: black; }
}
下記の様に、別ファイルで定義した CSS を @import で読み込む際にレイヤーを指定することもできます。この場合も、レイヤー優先度は後から指定した方が高くなります。
@import url(default.css) layer(default); @import url(comment.css) layer(comment);
トップレベルに記述したスタイルや、名前なしの @layer { ... } に記述したスタイルは名前なしレイヤとして扱われ、常に一番優先度が高くなります。
.contents .message-list .message p { color: black; } /* 名前なしレイヤ */
@layer comment {
.comment p { color: gray; } /* 名前なしレイヤにはかなわない */
}
名前なしレイヤは _default レイヤとみなして下記の様に順序制御できると嬉しいのですけどね。誰か提案してくれないかな。
@layer _default, comment; /* 名前なしレイヤより comment レイヤが強い */
Comment... ← 黒い...