CODEWITHSUNDEEP
css
Hairi
Hairi

Reputation: 3715

How to apply css class to an element but exclude nested/child element of the same style

Hi I am trying to to apply style to a body element but the style should not affect a nested element specified by a selector. I tried with :not but it seems not working for children elements. Here is my example:

<!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 would expect the paragraphs not to be transparent. Also both buttons are disabled but I would like to have one of them enabled, namely: Ebabled, but my expectations turned out not to be correct.

Is there any way to do this? Please don't judge me too harsh. I am new to CSS and I googled but couldn't find a solution. Probably as a newbie, my questions are wrong.

Upvotes: 2

Views: 2706

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

body:not(.not-red) means that the style should apply to a body element that has not the .not-red class.

What you are looking for is applying this style to the children of the body, so add a space to the selector body :not(.not-red)

body :not(.not-red) {
/*  ^ note the space here */
  color: #ff0000;
}
<h1>This is a heading</h1>

<p class="not-red">This is a paragraph.</p>
<p class="not-red">This is another paragraph.</p>

<div>This is some text in a div element.</div>

As an alternative you can override the style, since the stylesheet will be 'read' from above to under.

body {
  color: #ff0000;
}
.not-red {
  color: black;
}
<h1>This is a heading</h1>

<p class="not-red">This is a paragraph.</p>
<p class="not-red">This is another paragraph.</p>

<div>This is some text in a div element.</div>

Upvotes: 5

NinaW
NinaW

Reputation: 658

Just add the desired color to your not-red class

body {
  color: #ff0000;
}

.not-red {
  color: #000000;
}

Styles work in a cascading fashion. You can set the color in the body element as a default and then specify a different color for specific elements, if you so choose.

Upvotes: 1

Related Questions