CODEWITHSUNDEEP
csscss-selectorsselector
UnDiUdin
UnDiUdin

Reputation: 15384

CSS how to select all elements with a given class taht do not contain an element of another class

In the following code I would like to hide the button that has the copy-button class that does not contain an <i> element with the class nice

<!DOCTYPE html>
<html>
<head>
<style>
 
 .copy-button > :not([class*="nice"])
 {
   visiblility: hidden;
 }
 

</style>
</head>
<body>
<!-- I would like to see the following button... -->
<button class="copy-button">i contained<i class="cool nice"></i></button>

<!-- ... while I want this to be hidden -->
<button class="copy-button">i not contained</button>

</body>
</html>

I am not able to achieve it.

I would also be satisfied in hiding all the buttons that contain an , but this also does not work

 .copy-button > :not(i)
 {
   visiblility: hidden;
 }

How to achieve my result?

Thanks!

Upvotes: 2

Views: 188

Answers (1)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Your question isn't clear, like I and Zach Jensz already commented.
So in the following code I gave you both solutions.

.copy-button:has(i.nice) {
  background: red;
}
.copy-button:not(:has(i.nice)) {
  background: blue; 
}
<button class="copy-button">i contained<i class="cool nice"></i></button>

<button class="copy-button">i not contained</button>

Upvotes: 2

Related Questions