How to force firefox to use custom CSS for anchor tags that contain "#" or "javascript:"?

Question

To set your own colors for anchor, I know we can do this in UserContent.css: a { color:green!important; background-color: white!important; font-size: 1.2em!important; }

But how to set a specific color for the anchor tag that references the same page (the "#" is in the url). Or if "javascript:" is in the ural of the anchor tag?

Answer 1

Use the attribute-starts-with selector:

a[href^="javascript:"], a[href^="#"] {
    color: red;
}

Answer 2

Looks like the CSS3 Attribute Selector will work in Firefox 3.0+.

a[href^="#"]
{
  ⋮ declarations
}