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

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 >i contained<i ></i></button>

<!-- ... while I want this to be hidden -->
<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!

CodePudding user response：

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 >i contained<i ></i></button>

<button >i not contained</button>