CODEWITHSUNDEEP
csscss-selectors
Fran Verona
Fran Verona

Reputation: 5476

Apply style to all divs except one specific

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?

Upvotes: 8

Views: 21126

Answers (2)

mkkabi
mkkabi

Reputation: 801

I was just doing the same and found this answer Use the :not selector:

div:not(#div1){
    color:red;
}

it was posted in Apply CSS Style on all elements except with a SPECIFIC ID

Upvotes: 5

Marcus Whybrow
Marcus Whybrow

Reputation: 20008

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.

Upvotes: 12

Related Questions