Resetting styles by stylesheet for elements in (parent-element with class)

Question

I am trying to do is develop a CSS-stylsheet, that gets applied to all elements inside an element with a specific class - so far, no problem. But I need (to make it compatible with other stylesheets such as bootstrap) the possibility to set a new container element, like the one that applied the styles, inside the first container, that "resets" the values from my stylesheet.

Of course, a CSS reset isn't possible with current (-ly supported) versions. So I need to add something like a negative selector to all my selectors.

.jj-style-container:not(.jj-ignore) p.success-on-styled,
.jj-style-container:not(.jj-ignore):not(.jj-ignore) p.success-on-styled,
p.success-on-notStyled {
  color: #0f0;
}
.jj-style-container:not(.jj-ignore) p.success-on-styled:before,
.jj-style-container:not(.jj-ignore):not(.jj-ignore) p.success-on-styled:before,
p.success-on-notStyled:before {
  content: "SUCCESS!";
}
.jj-style-container:not(.jj-ignore) p.success-on-notStyled,
.jj-style-container:not(.jj-ignore):not(.jj-ignore) p.success-on-notStyled,
p.success-on-styled {
  color: #f00;
}
.jj-style-container:not(.jj-ignore) p.success-on-notStyled:before,
.jj-style-container:not(.jj-ignore):not(.jj-ignore) p.success-on-notStyled:before,
p.success-on-styled:before {
  content: "FAILURE :( Either styled although not wanted, or not styled, although wanted.";
}

<!DOCTYPE html>
<html>

<head>
  <title>Negator-Test</title>
  <link rel="stylesheet" type="text/css" href="../css/jj-styles-neg.css">
</head>

<body>

  <div class="jj-style-container">
    <p class="success-on-styled"></p>

    <div>
      <p class="success-on-styled"></p>
    </div>

    <div class="jj-ignore">
      <p class="success-on-notStyled"></p>
    </div>
  </div>

  <div class="jj-style-container jj-ignore">
    <p class="success-on-notStyled"></p>

    <div>
      <p class="success-on-notStyled"></p>
    </div>

    <div class="jj-style-container">
      <p class="success-on-styled"></p>
    </div>
  </div>

  <p class="success-on-notStyled"></p>

</body>

</html>

And I am wondering, why this does not capture the elements in a div with class="success-on-notStyled". The styles get applied to all elements that are children of a container with class="jj-style-container", though, so that part works. I don't want to rewrite the bootstrap code into mine though, and the styles of all other stylesheets that should be supported. Mine should just support the styles, but not the functionality that for example Bootstrap adds. I know I could re-define the styles, but that would mean far more could and a double-override of styles just to get back to the original styles, but that adds a lot of bloat.

Because it was marked as duplicate for css3 not selector to test parent class:

The given solution of that question is what I tried in my code sample above via the

.style-applier :not(.style-resetter)

selector. Apparently that doesn't work for some reason though. Any ideas why? The elements in the sub-div are still affected of the styles defined in my stylesheet.

Also related: http://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements — cimmanon, May 08 '15 at 12:21
Sorry, gave wrong link. But yes, I checked both - according to those question my code should work, so I don't see why it doesn't... I am going to try to reproduce it on an easier level again now, maybe I was just assuming some wrong stuff... :/ :S — Jannis Jorre, May 08 '15 at 13:27
The problem, mentioned in the linked question, that all elements in the body are getting selected doesn't apply here, cause we have another selector in front of the negating selector. So the body element is only being captured if it has the `style-applier`-class. — Jannis Jorre, May 08 '15 at 13:31
You need to provide an example that clearly shows the problem. If you're using the ordinary ancestor selector (as opposed to the direct descendant selector), you can't reliably get `:not()` to work (as explained by the second question). — cimmanon, May 08 '15 at 13:45
I just recreated my problem in the snippet. Look there. The HTML is how I want to use it, but the CSS/SCSS to it doesn't do what I want it to. — Jannis Jorre, May 08 '15 at 14:10
Are you doubling up `:not(.jj-ignore)` for a specific reason? — cimmanon, May 08 '15 at 14:31
Yes. At first, I have `.jj-style-container:not(.jj-ignore)` to capture that the top-container, that says the styles should be used doesn't have the ignore class (this is important for some scripts later - don't want to go into detail there, it has it's reasons). Then, I use `.jj-style-container:not(.jj-ignore) :not(jj-ignore)` to test if the current element (that is under that selector again) doesn't have some parent element between the top-container and itself. I have to use the other :not() like before again, because if I wouldn't, the first one would be useless again. — Jannis Jorre, May 08 '15 at 14:37

Resetting styles by stylesheet for elements in (parent-element with class)

0 Answers0