Styling <a> without href attribute
Is it possible to match all links without href
specified via CSS?
Example:
<a>Invalid link</a>
I know its possible to match all links with href but I'm just looking for the opposite.
Either use CSS3's :not()
:
a:not([href]) {
/* Styles for anchors without href */
}
Or specify a general style for all a
, and one for a[href]
to override it for those with the attribute.
a {
/* Styles for anchors with and without href */
}
a[href] {
/* Styles for anchors with href, will override the above */
}
For the best browser support (includes ancient but not quite forgotten browsers), use the :link
and :visited
pseudo-classes instead of the attribute selector (combining both will match the same as a[href]
):
a {} /* All anchors */
a:link, a:visited {} /* Override */
Also see this answer for an in-depth explanation of a[href]
versus a:link, a:visited
.