UPDATE: This may not be possible. I'm still looking for a solution.
I need to create a CSS selector to select all the page elements using *
which would exclude .exception
elements along with ALL its descendants (!). This .exception
element and its descendants needs to detain its initial styles while *
styles should be applied to all the other page elements.
IMPORTANT: The solution is not good if any styles will be applied to .exception and its descendants first and then I need to override it to its initial values manually! I don't want to apply ANY STYLES to .exception
and/or its descendants AT ALL!
Please keep in mind that this is only a trivial example. The page where I need to apply the solution contains much more elements so I need a generic solution for filtering the elements. Manual selection and overriding elements wouldn't be possible there.
http://jsfiddle.net/zV5gf/2/ (initial state, no solution)
This solution is not good enough because it WILL EXCLUDE li.exception but it WILL NOT EXCLUDE its descendants. li.exception descendants initial styles will be lost.
http://jsfiddle.net/zV5gf/3/
*:not(.exception){
background-color:orange !important;
}
and the logical solution for div.exception and its descendants doesn't work (not supported by browsers):
*:not(.exception *){
background-color:orange !important;
}
How about putting background:inherit
to its children?
*{
background-color:white
}
*:not(.exception){
background-color:red
}
.exception *{
background:inherit;
}
JSFiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With