34

I'm attempting to add a drop down to a page that already has a global "select" style. Is there a way to tell the new select list to ignore the global style? There's about 1 to 2 zillion existing drop downs that use the global style, so I don't want refactor the existing html.

Parris Varney
  • 11,320
  • 12
  • 47
  • 76

7 Answers7

46

Assuming you could set a unique class or id on that element you could use the (limited browser support) property all and set it to unset or initial

Something like

<div class="ignore-css"><div>

and

.ignore-css{all:unset;}
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
25

there is no easy way to do what you are asking, one approach is to create a CSS class that resets all appropriate attributes for a specific element and its children to make it more complete, here is a good starting point Element specific CSS reset

Kris Ivanov
  • 10,476
  • 1
  • 24
  • 35
8

You can override another style using "!important", like this:

a {color: red !important}

Or using a more specific selector:

*               // a=0 b=0 c=0 -> specificity =   0 
LI              // a=0 b=0 c=1 -> specificity =   1 
UL LI           // a=0 b=0 c=2 -> specificity =   2 
UL OL+LI        // a=0 b=0 c=3 -> specificity =   3 
H1 + *[REL=up]  // a=0 b=1 c=1 -> specificity =  11 
UL OL LI.red    // a=0 b=1 c=3 -> specificity =  13 
LI.red.level    // a=0 b=2 c=1 -> specificity =  21 
#x34y           // a=1 b=0 c=0 -> specificity = 100 
#s12:not(FOO)   // a=1 b=0 c=1 -> specificity = 101

See specificity documentation here.

UPDATE:

For example:

You have a global rule:

a {color: blue}

But you want your links red. So, you must create the rule below:

a {color: red !important}

If the global rule also has "!important", you must use a more specific selector: So, you may use:

body a {color: red !important}
FranciscoBouza
  • 590
  • 6
  • 19
Topera
  • 12,223
  • 15
  • 67
  • 104
  • I think the select tags have been totally hijacked by a jquery plugin (jqTransform), this surely would have worked otherwise. – Parris Varney May 03 '11 at 00:53
3

you can eaither add cascading styles like:

#id1 .class1 select

or

.class:width:200px !important

The !important will make it use the style you want rather than the global one, but if you have to overwrite it it can get a little tricky. You have to use a combination of both.

locrizak
  • 12,192
  • 12
  • 60
  • 80
3

I'd be most inclined to narrow down your selectors. By that I mean..

<div class="newbox">
     <a href="#">I want this to be different.</a>
</div>

CSS:

div.newbox a
{
     color: #888;
     text-decoration: none;
}
Marty
  • 39,033
  • 19
  • 93
  • 162
2

Or you could just... 

<div class="global-css">
<div class="ignore-css">
<div class="important-css">
......
</div>
</div>
</div>

where 

.global-css{
    vertical-align: middle;
}
.ignore-css
{
    all:unset;
}
.important-css{
    vertical-align:left !important;
}
Koby Douek
  • 16,156
  • 19
  • 74
  • 103
Din Sahovic
  • 21
  • 1
0

What I usually do in this situation is add a unique class to the new element; in this case something like this will work:

<select class=i-am-unique>
    <!-- <option> elements in here -->
</select>

and then in the stylesheet, find the global rule and add a :not() pseudoclass to differentiate:

select:not(.i-am-unique) {
    /* global rules */
}

select.i-am-unique {
    /* unique rules */
}

This requires minimal code updates, with only 1 class added in your HTML markup, one CSS selector tweaked, and 1 new declaration block for the unique element. Here is an example.

In addition, :not() is supported by a wide swath of browsers, even IE9+ and Safari 3.2+.

CSSBurner
  • 1,565
  • 15
  • 13