Hey, I'm having some trouble applying a style to a body element without affecting a specific nested element selected by a certain selector. I attempted to use the :not pseudo-class but it doesn't seem to work for child elements.
Here's an example of what I tried:
<!DOCTYPE html>
<html>
<head>
<style>
body:not(.not-disabled) {
color: #ff0000;
opacity: 0.4;
pointer-events: none;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p class="not-disabled">This is a paragraph.</p>
<p class="not-disabled">This is another paragraph.</p>
<button class="not-disabled">Enabled</button>
<button>Disabled</button>
<div>This is some text in a div element.</div>
</body>
</html>I expected the paragraphs not to be transparent. Also, even though both buttons are disabled, I wanted one of them to be enabled, specifically: Enabled, but my expectations were incorrect.
Is there a way to achieve this? Please go easy on me as I'm new to CSS and despite searching online, I couldn't find a solution. It's possible that as a beginner, my questions are misguided.