Tailwind > using has- in combination with &> child selector

Question

I have following HTML

<div className='has-[.true]:[&>*]:hidden px-1 py-2 text-sm border-t relative md:border-r'>
      <MenuToggle />
      <div
        id='menuContainer'
        className='flex flex-row items-center w-full h-full md:flex-col'
      >

Inside MenuToggle there is logic to add .true class and that works with the parent's has- selector. For instance, this works

has-[.true]:hidden

this will hide the parent. However, I do not wish to hide parent, but another child of parent, the one with id=menuContainer. So I tried to make child selector work, via [&>*], but I'm missing something.

something like this is what I am trying to do, but failing

has-[.true]:[&>#menuContainer]:hidden

Answer 1

I got this to work using peer, however, if it is possible to combine has with child selector, I would appreciate an example.

now I can directly hide the div I wish without parent. MenuToggle has a div inside with "peer" class mark.

<div className='px-1 py-2 text-sm border-t relative md:border-r'>
      <MenuToggle />
      <div className='peer-[.true]:hidden flex flex-row items-center w-full h-full md:flex-col'>
        <div className='hidden items-center mt-5 mb-10 md:flex'>
          <Logo className='size-7' />
        </div>