Is there a way to tell an html element to ignore any stylesheets?

Question

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 ab

Answer 1

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}

Answer 2

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

Answer 3

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+.

Answer 4

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;
}

Answer 5

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;
}

Answer 6

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.