通常CSSといえば親要素を元に子要素を絞り込んでスタイルを指定するのが一般的で、子要素の要素名（タグ、クラス、IDなど）を元に親要素のスタイルを指定するということはできないように思います。

例）.top .contents、.about contentsなど

しかし、子要素の要素名を元に親要素のスタイルを変える方法があります。

:has()、:not()という擬似クラスを使います。

図示
.wrapper > .document
.wrapper > .media
mediaクラスの方だけ全体の背景色を変えたい時、
.wrapper:has(.media)とすると指定することができる

例えば以下のようなhtmlがあったとします。

<div class="wrapper">
    <div class="document">
        なんかコンテンツ
    </div>
</div>

<div class="wrapper">
    <div class="media">
        なんかコンテンツ
    </div>
</div>

このhtmlに対して、「div.mediaがあるdiv.wrapper」にだけ背景色を設定したいとなったとした場合、以下のようにcssを書くことで実現することができます。

.wrapper:has(.media){
    background-color: red;
}

.wrapper:has(.media)という書き方をすることで、「子要素に.mediaという要素をもつ.wrapper要素」を指すセレクターとなります。
つまり子要素によって、親要素のcssを書き分けることができたわけです。

この時の「:has()」は擬似要素と呼ばれるcssセレクターの一種です。

擬似要素

擬似要素とはセレクターに付加することで要素の特定の条件のスタイルを変更するものです。
よく使われるものでは、::before、::after（要素の前後に要素を追加する）、aタグの:hover（マウスを乗せた時のスタイル）などがあります。

:has()

:has()は「〜を持つ要素」という意味で、特定の条件に当てはまる場合にスタイルを有効にすることができます。
例えば、「p:has(span)」であれば、「子要素にspanタグがあるpタグ」ということになります。
この()の中にとれるのは子要素だけでなく、ul:has(+img)と書いて、「隣にimgタグがあるulタグ」を指すことができるなど、隣接セレクタや兄弟セレクタにも対応しています。

使用例

• ul:has([class])・・・クラス名がついている場合のみに有効なスタイルを指定できる。
• h2:has(+img)・・・見出しの後に画像が来る場合にのみスタイルを適用したい場合に使える。

:not()

:not()は「〜を持たない要素、〜ではない要素」という意味で、指定した条件に当てはまらない要素を指定することができます。
例えば、「p:not(.text)」であれば、「textクラスではないpタグ」を指します。
この:not()も子要素を取れるほか、「li:not(:first-child)」と書いて一番最初のli以外という指定もできます。

使用例

• .element:not(:first-child) ・・・1番目以外を指定する。
• section:not(+section)・・・sectionタグが隣接していないsectionタグのみを指定する。

まとめ

特定の条件をCSSで指定できるようになったことで、親要素から子要素を指定するだけでなく、子要素を条件として親要素のスタイルを設定することができるようになっています。

自由にhtmlを組むことができるような案件であれば、classやIDを設定することでスタイルを設定できるのですが、CMSなど自由度の少ないhtmlに対してスタイルを設定したいときにも、発想と工夫でこのような要素を活用してデザインすることができます。

今後はもっと複雑な条件分岐が設定できるというような話も聞きますので、より機能的なCSSが構築できるようになっていくのではないかと思います。
参考：https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html