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.
Yes, it is valid to use the anchor tag without a href attribute. If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.
Using the "#" character as a placeholder basically makes the link "active." The browser interprets it as a tag that points to something else. If href is empty, the browser will assume the a tag is just another tag.
The tag is fine to use without an href attribute. Contrary to many of the answers here, there are actually standard reasons for creating an anchor when there is no href. Semantically, "a" means an anchor or a link. If you use it for anything following that meaning, then you are fine.
You should add [role="button"] as semantically the <a> tag is no longer being used as a link, but as a button.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With