特定のクラス内では無効となるクラスを設定したい

Question

前提・実現したいこと

例えば下記のようなHTMLがあった場合、.btnにbackground:red;を指定すると、当然ですが.mukou内の.btnも赤くなります。

<div class="content">
    <a href="#" class="btn">link</a>
    <div class="mukou">
        <a href="#" class="btn">link</a>
    </div>
</div>

.btn{
    background: red;
}

.mukouの中ではbackground:red;が適用されないようにしたいのですが、このような指定方法ができるのでしょうか。
下記のように上書きすればリセットできると思いますが、「.mukouの中以外に適用する」といった指定が最初からできないかと思い質問させていただきました。

.btn{
    background: red;
}

.btn .mukou{
    background: none;
}

Answer 1

例示のHTMLのように、親子関係があるならできます。

:not(.mukou) > .btn  {
    background: red;
}

直接の親子ではなくて、先祖と子孫である場合は、難しいかと思います。

このセレクターは1つの要素のみに適用されます。先祖要素を除外することはできません。

:not() - CSS: カスケーディングスタイルシート | MDN

Comments

[tomoaki0816]

ありがとうございます。
今回は先祖と子孫関係になるため難しいということがわかりました。
:notは使用したことがなかったので、親子関係で解決できる場合に試してみたいと思います。