How much weight does a pseudo class have?

Question

I'm working in a DNN environment where the default style sheet which every site loads sets styles for pseudo-classes. I could edit the default style sheet, but since this is stock and comes with all upgrades, I'd prefer to leave it alone and override their styles at the skin level.

Does anyone know of a solution to get all these pseudo classes to start listening to the standalone element again?

A:link
{
    text-decoration: none;
    color: #003366;
}

A:visited
{
    text-decoration: none;
    color: #003366;
}

A:hover
{
    text-decoration: underline;
    color: #ff0000;
}

A:active
{
    text-decoration: none;
    color: #003366;
}

Also, would a:hover {} always beat out selector a {} no matter how strong selector is?

---

EDIT: I'm not wanting to use !important as I'll have to use important everywhere, and I don't want to embed any style to the document.

My presumption is that a:link{text-decoration:none;} will only ever be overridden with the same pseudo class and my hope is that there's a way around having to always define pseudo classes to every a tag.

Answer 1

If you include the declarations inside <style> tags in the HTML itself it will overwrite any styles set in external stylesheets.

Another solution is to create a second CSS document to override the existing CSS. Make sure you include this CSS file after you include the existing CSS file (for IE 6 compat). Then use the !important tag on all styles you want to override.

For more information refer to the section of the W3 specs regarding CSS cascading.

Edit: To answer your second question. a:hover{} would beat out selector a{}, but selector a:hover{} would beat out a:hover{}.

Answer 2

Also, would a:hover {} always beat out selector a {} no matter how strong selector is?

It depends: the more-specific selector will win in the case of conflicting attributes being set; otherwise, they will be additive. (Unless, of course, you're doing things with !important...)

Answer 3

I just tested the load time while using :first-child and :last-child. The difference seemed to be around 8ms for each (on my local machine) although I'm not positive on if that grows by factors the more you use.