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


i trying develop css-stylsheet, gets applied elements inside element specific class - far, no problem. need (to make compatible other stylesheets such bootstrap) possibility set new container element, 1 applied styles, inside first container, "resets" values stylesheet.

of course, css reset isn't possible current (-ly supported) versions. need add negative selector 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 wondering, why not capture elements in div class="success-on-notstyled". styles applied elements children of container class="jj-style-container", though, part works. don't want rewrite bootstrap code mine though, , styles of other stylesheets should supported. mine should support styles, not functionality example bootstrap adds. know re-define styles, mean far more , double-override of styles original styles, adds lot of bloat.


because marked duplicate css3 not selector test parent class:

the given solution of question tried in code sample above via the

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

selector. apparently doesn't work reason though. ideas why? elements in sub-div still affected of styles defined in stylesheet.


Comments