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
Mannix11mo ago
I'm cofused seems like your css should work https://codepen.io/MannixMD/pen/JjzPZdw?
Mannix
CodePen
JjzPZdw
...
Frost
Frost11mo 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
Mannix11mo ago
try
.category-container:not(:has(.category)) {
background-color: red;
}
.category-container:not(:has(.category)) {
background-color: red;
}
Frost
Frost11mo ago
it's working now, thanks!
Mannix
Mannix11mo ago
thumbup
clevermissfox
clevermissfox11mo ago
Yep it has to be :not :has for some reason
Want results from more Discord servers?
Add your server