CSS: Work with not()

Question

Hello,

I have a CSS that looks like this:

a:focus { background-color: #eeeeee; }

Now in CSS3 there's the not() attribute. How could I work with this when I want add the focus-background-color to all elements but with one exception: I want that this isn't added to a-tags/elements inside .audio_wrapper

Answer 1

Try with there rules:

a:focus { background-color: #eeeeee; }
.audio_wrapper a:focus {background-color: #000000}; <!-- or white or what is your default color-->

Answer 2

The :not pseudo-class won't help you in this situation because it only accepts simple selectors, and your condition relies on an attribute of the a's parent. The best solution is just to define the rule and then override it with a second rule for the conditional case.

Edit: On Second thought, you might be able to do it like this:

:not(.audio_wrapper) a:focus { ...rules... }

Answer 3

The not selector is only supported by modern browsers (Firefox, Safari and Opera) and not IE.

a:not(.audio_wrapper){ background-color: #eeeeee; ............}