links

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

How to Disable Links

The topic of disabling links popped up at my work the other day. Somehow, a "disabled" anchor style was added to our typography styles last year when I wasn't looking. There is a problem though: there is no real way to disable an <a></a> link (with a valid href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web.

At a certain point, it looked like my co-workers were not going to accept this fact, so I started thinking of how this could be accomplished. Knowing that it would take a lot, I wanted to prove that it was not worth the effort and code to support such an unconventional interaction, but I feared that by showing it could be done they would ignore all my warnings and just use my example as proof that it was OK. This hasn't quite shaken out for me yet, but I figured we could go through my research.

(more…)

:any-link

The :any-link pseudo-class in CSS provides a method for selecting elements that are the source anchor of a hyperlink.

If the term source anchor lost you, that's a fancy name for the href attribute on the HTML elements <a></a>, <link /> and <area />. (Why you would need to target an <area /> or <link /> in CSS is beyond me, but hey.) The HTML spec has a whole lot more information on that.

An element that accepts and contains a href attribute is a hyperlink and will be selected with :any-link. This becomes a handy way of selecting all link-based HTML elements that might otherwise appear unrelated and without touching the markup. Perhaps it exists because you might think :link would select all links, but it misses :visited, so this wraps them all up together.

Functionally, it's just like the attribute selector [href].

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag