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
Post a Comment