How to select an element that doesn't have a child or contains a particular element

how can i select an element in css if it doesn't have or contain a particular element for example

<style>
 /* 
this is not selecting the category container if it doesn't have a child element with a class of category
 */
  .category-container:has(>:not(.category)){
    background-color:red;
  }
</style>
<div class="category-container">
  <div class="category"></div>
</div>

<style>
 /* 
this is not selecting the category container if it doesn't have a child element with a class of category
 */
  .category-container:has(>:not(.category)){
    background-color:red;
  }
</style>
<div class="category-container">
  <div class="category"></div>
</div>

i want to match an element with a class called

category-container

category-container

and doesn't have a child element with a class called

category

category

6 Replies

Mannix•9mo ago

I'm cofused seems like your css should work https://codepen.io/MannixMD/pen/JjzPZdw?

Mannix

CodePen

JjzPZdw

...

Frost•9mo ago

it's still not working i don't know why

<style>
.category-container:has(>:not(.category)){
    background-color:red;
  }
</style>

<div class="category-container">
   <div class="category"><span>test</span></div>
   <div><span>test</span></div>
</div>

<style>
.category-container:has(>:not(.category)){
    background-color:red;
  }
</style>

<div class="category-container">
   <div class="category"><span>test</span></div>
   <div><span>test</span></div>
</div>

it is only working when the container element only contains a one div but when i add another div it's not matching the container element.

Mannix•9mo ago

try

.category-container:not(:has(.category)) {
    background-color: red;
}

.category-container:not(:has(.category)) {
    background-color: red;
}

Frost•9mo ago

it's working now, thanks!

Mannix•9mo ago

clevermissfox•9mo ago

Yep it has to be :not :has for some reason

Gaming

Programming

How to select an element that doesn't have a child or contains a particular element