Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to select all elements excluding a specific one along with all its descendants

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)

enter image description here enter image description here


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;
}

enter image description here enter image description here

like image 619
Hrvoje Golcic Avatar asked Oct 01 '22 19:10

Hrvoje Golcic


1 Answers

How about putting background:inherit to its children?

*{
    background-color:white
}

*:not(.exception){ 
    background-color:red
}

.exception *{
    background:inherit;
}

JSFiddle

like image 169
Vucko Avatar answered Oct 06 '22 00:10

Vucko