Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 304
Fran Verona Avatar asked Jan 04 '11 10:01

Fran Verona


People also ask

How do I apply CSS to all elements except one?

Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector.

How do I exclude a rule in CSS?

In CSS, to exclude a particular class, we can use the pseudo-class :not selector also known as negation pseudo-class or not selector. This selector is used to set the style to every element that is not the specified by given selector. Since it is used to prevent a specific items from list of selected items.

How do I select all child elements except one in CSS?

How to select all children of an element except the last child using CSS? When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.

Which selector is used to apply a style to multiple elements?

The CSS grouping selector is used to select multiple elements and style them together.


1 Answers

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.

like image 131
Marcus Whybrow Avatar answered Oct 25 '22 02:10

Marcus Whybrow