Question

I’m trying to apply styles to all my divs, except one specific. I’m doing this but it doesn’t work:

#toolbar div[class~="olControlNavigationHistory"]{
   float: left;
   background-repeat: no-repeat;
   margin: 2px 12px 2px 12px;
}

So I need to apply this style to all the divs in #toolbar EXCEPT the div with a class called “olControlNavigationHistory”.

How can I do this? Is this possible?

Answer 1

Just apply the rule to all divs first:

#toolbar div {
   float: left;
   background-repeat: no-repeat;
   margin: 2px 12px 2px 12px;
}

Then you need to zero the values out for the specific case:

#toolbar div.olControlNavigationHistor {
   float: none;
   background-repeat: repeat;
   margin: 0;
}

Of course this assumes that the property values that specific div would have had without the first rule applied are each properties defaults (such as margin: 0 and float: none.)

EDIT:
However in the future when CSS3 is supported everywere, you could also just rewrite your original rule as #toolbar div:not(.olControlNavigationHistory) and it would work correctly and elegantly.