はじめに

かなり初心者向けです。

Material UI の一つである Mantine UI で「Checkbox」というコンポーネントを使用し、checked属性によってCheckboxコンポーネントのデザインを変更したいのに、実際にchecked属性が付いているのはその子要素のdivのさらに子要素のinputと入れ子になっていてどうしたらええんや～（CSS初心者並感）

ということがありました。

/** 使用しているコンポーネントの見た目 */

<Checkbox
    label="チェックボックス"
    oChange={() => {}}
    size="md"
    mr="xl"
    checked
/>

/** 実際の中身 */

<div class="mantine-Checkbox-root">     /** Checkboxコンポーネントを構成する大外の要素*/
    <div class="mantine-Checkbox-inner">
        <input type="checkbox" checked />   /** チェックボックスの本体 */
    </div>
</div>

そこで調べてみたところ、擬似セレクタの一つにhasというものがあったので紹介します。

概要

擬似セレクタ
has

擬似セレクタ

セレクタは .parentや#children のようなHTMLの要素を特定するためのものですが、擬似セレクタは要素の状態によってスタイルを設定することができるものです。

ほんの一例ですが、

checkboxがチェックされていることを示す :checked
クリックされアクティブ化された要素（a や button等）を示す :active
カーソルが要素にかざされていることを示す :hover

などが有名です。

has

今回使用するセレクタは :has セレクタです。

これは特定の子要素を持つ親要素を指定するためのセレクタとなります。

<div class="parent">
  <input type="checkbox" class="checkbox"/>
</div>

<style>
  .parent:has(input:checked) {
    background-color: red;
  }
</style>

例えば上記のようにすると、

「checked属性がtrueである（checkedがついている）input要素」を子要素に持つ親要素

を指定することができます。

最後に

長らくWeb開発に携わっていますが未だにCSSの苦手意識が強いため、もう少し積極的に触れていきたいと思ってます。

同じ問題を抱えている人の手助けになれたら幸いです！