How to select all elements, excluding a specific one, together 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 elements of the page with *which would exclude the elements .exceptionalong with all its descendants (!). This element .exceptionand its descendants should delay their initial styles, while styles *should apply to all other elements of the page.

IMPORTANT: the solution is not suitable if any styles are applied to .exception and its descendants, and then I need to manually redefine it to the initial values! I do not want to apply ANY STYLES to .exceptionand / or its descendants AT ALL!

Desired Result

Please keep in mind that this is just a trivial example. The page where I need to apply the solution contains many more elements, so I need a general solution to filter the elements. Manual selection and redefinition of elements is not possible there.

http://jsfiddle.net/zV5gf/2/ (initial state, no solution)

enter image description here enter image description here


Solution with: not a selector - not perfect

This solution is not effective enough because it EXCLUDES li.exception, but it DOES NOT EXCLUDE its descendants. Personal descendant 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 does not work (not supported by browsers):

*:not(.exception *){
    background-color:orange !important;
}

enter image description here enter image description here

+4
source share
3

background:inherit ?

*{
    background-color:white
}

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

.exception *{
    background:inherit;
}

JSFiddle

+4

jquery, .

$(".exception").find("*").addClass("exception");

Fiddle

0

In any case, you are going to mention colors for differentiation, then why we use 'background: inherit'. Instead, use just

*:not(.exception) {
    background-color: red;
}
.exception, .exception * {
    background-color: white;
}
0
source

Source: https://habr.com/ru/post/1540864/


All Articles