Styling block-level links

The recent support of block-level links in HTML5 has made it easier to link multiple items to the same page by wrapping the content with a single link. While this approach makes structuring the page easier, it does present new challenges when styling the linked elements.

Because all elements are inside the link, they all equally share the link’s states. This means that when a user hovers over one element, all elements would receive the link’s styling. This can be problematic, as global link styles often show up unexpectedly on items within block-level links.

The key to successfully styling block level links to write descendent selectors that target the elements inside the link, and make sure you include selectors for each of the states as well. It’s also important to remember that because the link is now a parent element, it’s properties (including background) will be painted behind the elements inside of it, not in front.

Read more about block-level links on HTML5 Doctor.

Ultra Glazed Blue Vase

Ultra glazed blue vase

This attractive vase is imported from Villalpando, Spain. Fired with their signature blue glaze, this vase is a one-of-a-kind treasure that will beautify any environment.

$75