Question

Styling an element with an attribute set is easy: E[attr].

Is there any way to style an element with CSS2 based on the absence of an attribute, something like this E[!attr]? (JavaScript solution is not an option).

For example, there are several class rules followed by id rule:

.abc {padding:1em;}
.def {padding:2em;}
#n a {padding:0;}

The html code is:

<div id="n"><a href="" class="abc">.</a><a href="" class="def">.</a></div>

Classes abc and def have lowerer priority against id-ed rule so both a have padding 0. I can’t change the sequence of rules above, but I can change id-ed rule add my own rules. I want to avoid writing rules like #n a.abc for every class (there’re many). Instead I need something like #n a[!class] to keep all class-ed as intact.

Answer 1

Sadly, not in CSS2. The best you can do is to cascade your declarations:

E {color: red}
E[attr] {color: blue}

But even this can’t really be relied on, as IE6 doesn’t honour attribute selectors.

In CSS3, though, there is the lovely “:not” pseudo selector (http://www.w3.org/TR/css3-selectors/#negation).

EDIT

Thanks for clarifying. How about:

.abc {padding:1em; !important} .def{padding:2em; !important}

#n a{padding: 1em}