0

I have the css code below. In the code, I can successfully target and hide the children. But I want to hide the parent element if it has these classes in their children. This code only hides the children but the parent class is present. How can I hide the parent if it has these children?

    .legend-row > .task-icon-AA, .task-AA, 
    .legend-row > .task-icon-BB, .task-BB, 
    .legend-row > .task-icon-CC, .task-CC {
        display: none;
    }
TreacleMark
  • 163
  • 8
  • You can use `.legend-row:has(> .task-icon-AA) { display:none; }` - more info on [`:has`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) – Pete Mar 16 '23 at 10:14
  • yes but :has is not supported in all browsers @Pete – TreacleMark Mar 16 '23 at 10:14
  • 1
    It's supported by most major browsers - if you're bothered about the small amount that use firefox then you can't do it with css – Pete Mar 16 '23 at 10:16

0 Answers0