5

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

Hrvoje Golcic
  • 3,446
  • 1
  • 29
  • 33
  • Is it possible to invert your method? eg. * { background red } *.exception * {background: white} – David Nguyen May 16 '14 at 15:10
  • It would be simpler to apply whatever this 'style` is automatically and override it with the specific div. Frankly, I can't think of a reason to go the suggested (not) route. – Paulie_D May 16 '14 at 15:14
  • @DavidNguyen No, here is just an example. In reality, I want to detain default value of div.exception elements. – Hrvoje Golcic May 16 '14 at 17:49
  • @Paulie_D because there will be no "specific div" that is so simple as in example, let's say that if the div might contain thousands of elements I'd need to have a general solution. This is what I'm seeking for. Interesting question though – Hrvoje Golcic May 16 '14 at 17:50
  • 1
    1. Not possible. 2. There must be a better way to achieve whatever-you're-trying-to-achieve than by giving EVERY element a background. What are you trying to achieve that requires every individual element? – Rudie May 16 '14 at 18:02
  • @Rudie In short, adding accessible background to a specific site dinamically – Hrvoje Golcic May 16 '14 at 18:03
  • 1
    @HrvojeGolcic And in less short? Do you have an example? I can't imagine anything that would require selecting every individual element. – Rudie May 16 '14 at 18:05
  • @Rudie Yes you are right, but what if you know that you need to apply red background but you don't really know what elements on the page to expect. To apply in only on body might not be general solution, and about other elements I never know what to expect. This is why I used * and it works just fine, except this editor that I need to exclude. Also, in general it's good question because `*:not(.exception *)` should do the job but it doesnt. – Hrvoje Golcic May 16 '14 at 18:11
  • 1
    Maybe put the editor in an iframe? That's the only CSS boundary I can think of. – Rudie May 16 '14 at 18:39
  • Now you've clarified your question, this is not possible using vanilla CSS given the constraints you've given – SW4 May 16 '14 at 18:54
  • @Rudie since I'm applying styles dynamically, I don't have access to a code. – Hrvoje Golcic May 16 '14 at 19:58
  • If one claims it's not possible, which just might be a true, it could be answer to this problem as well – Hrvoje Golcic May 16 '14 at 19:58
  • If you have JS, you could give EVERY element a class and style that. – Rudie May 16 '14 at 20:01
  • @Rudie true, if we don't find a desired solution, I'll need to do this somehow like you are saying – Hrvoje Golcic May 16 '14 at 20:03
  • 1
    Here is a decent explanation of :not. it only takes simple selectors http://css-tricks.com/almanac/selectors/n/not/ – tmcc May 16 '14 at 20:57

4 Answers4

4

How about putting background:inherit to its children?

*{
    background-color:white
}

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

.exception *{
    background:inherit;
}

JSFiddle

Vucko
  • 20,555
  • 10
  • 56
  • 107
  • The best answer so far. Problem is that this applies the color from div.exception to all its descendants (in our case white). This works great for given example, but not in general case. That is why I wrote: **I don't want to apply ANY STYLES to div.exception and/or its descendants AT ALL!** I want them to detain it's original value. This is because, not necessarily, all the descendants will be white. I'll update my example. However, this is great idea, I haven't thought bout it before, this might lead to the solution – Hrvoje Golcic May 17 '14 at 09:45
0

If you can use jquery this is dynamic.

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

Fiddle

tmcc
  • 1,010
  • 8
  • 12
0

Anyway you are going to mention the colors for differentiation then why we use 'background: inherit'. Instead of that use simply the below

*:not(.exception) {
    background-color: red;
}
.exception, .exception * {
    background-color: white;
}
Antony SUTHAKAR J
  • 912
  • 1
  • 7
  • 13
  • As described in the post this is exactly what I don't want to do. The example here is trivial, I don't want to apply white or **any other color** to descendants. I want them to retain the color they initially had, whether it's white, green, purple or etc. Look up the attached photo in the post. I've also updated jsfiddle so that it's more clear what I need – Hrvoje Golcic Nov 05 '15 at 12:00
0

Maybe something like this * :not(.exception *) { /* apply styles */ }

Giorgos Lemonidis
  • 61
  • 2
  • 6