How to select all elements excluding a specific one along with all its descendants
css, css-selectors
Solution
How about putting `background:inherit` to its children?
*{
background-color:white
}
*:not(.exception){
background-color:red
}
.exception *{
background:inherit;
}
JSFiddle
Problem
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! Desired result 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) Solution with :not selector - not perfect 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; } ```