特定の親要素を持つ子要素だけcssを当てない方法のデモページ

:not(pre) > codeの場合

p > code

:not(pre) > code

pre > code

:not(pre) > code

div > pre > code

:not(pre) > code

pre > span > code

この場合、codeはspanの直下のため、cssが除外されません。

:not(pre) > code

:not(pre) codeの場合

p > code

:not(pre) code

pre > code

:not(pre) code

div > pre > code

この場合、divはpreではないので、:not(pre)にマッチしてしまい、divの中にあるcodeにスタイルが当たってしまいます。

:not(pre) code

pre > span > code

この場合、spanにマッチするため、cssが除外されません。

:not(pre) > code

:not(pre, :has(pre)) codeの場合

p > code

:not(pre, :has(pre)) code

div > code

:not(pre, :has(pre)) code

pre > code

:not(pre, :has(pre)) code

div > pre > code

この場合、divはpreではないですが、preをもっているのでスタイルは適応されません。

:not(pre, :has(pre)) code

pre > span > code

:not(pre, :has(pre)) code

div > pre > span > code

:not(pre, :has(pre)) code

all: unsetの場合

この場合、cssがリセットされてしまうので、注意が必要です。例として、全体のcodeに適応しているcolor:#fffがリセットされ親であるpreに適応しているcolorが適用されます。正しい調整が必要です。

p > code

all: unset

pre > code

all: unset

div > pre > code

all: unset

pre > span > code

:not(pre) > code