Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 377
knoopx Avatar asked Feb 26 '11 17:02

knoopx


People also ask

Can you have a without href?

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.

What can I use instead of a href?

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.

Is href attribute mandatory?

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.

How do you make a link without using href?

You should add [role="button"] as semantically the <a> tag is no longer being used as a link, but as a button.


1 Answers

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.

like image 120
BoltClock Avatar answered Sep 23 '22 12:09

BoltClock