Parris Varney Parris Varney - 5 months ago 6
HTML Question

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

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.


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    // a=0 b=1 c=3 -> specificity =  13    // 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.


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}