Request Child and Subchild selector

[mimoudix]

Hello !

<li>
   <input type="radio" value="0" id="black" name="color-choice" class="sr-only peer" aria-labelledby="color-choice-0-label" checked="">
   <label for="black" class="flex items-center justify-center text-xs rounded-full peer-checked:child:child:block peer-checked:border-2 h-9 w-9 peer-checked:border-gray-900">
      <span class="flex items-center justify-center w-6 h-6 bg-gray-900 rounded-full">
         <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="hidden w-4 h-4 text-white">
            <path d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
         </svg>
      </span>
   </label>
</li>

As you can see I managed to hide/show the border when checked, but couldn't select the subchild without selecting its parent via Tailwindcss

peer-checked:child:child:block
PS : I don't wanna use group-

plugins: [
    function ({ addVariant }) {
        addVariant('child', '& > *');
        addVariant('child-hover', '& > *:hover');
    }
],

[mimoudix]

https://codepen.io/mimoudix/pen/KKJEwqJ