a:link around div - styling inside div

Question

I have a div that I want to be clickable, so I've wrapped an "a" tag around it, as it is valid HTML 5 and made the div a block level element.

Now, the problem I'm having is styling content inside that div, as everything displays as a link, and despite trying numerous methods I haven't found a good solution for custom styling everything inside the div.

A reduced test sample can be viewed here:

http://codepen.io/anon/pen/aencq

So, my question is basically, what's the best way of styling elements such as h2 and p that are inside a block level div, that is wrapped with an a:link.

Answer 1

Basically what is happening to you is that all elements under <a> tag are inheriting css properties of a hyperlink (underline, blue color, etc)

To counter this create an id or class on your tag and remove/override the default anchor properties.

For example to remove the underline you do: text-decoration: none;

After that override Link-related pseudo-classes: :link, :visited, :hover and :active.

Answer 2

The best way is a matter of opinion. To me the best way would be to use the most succinct CSS as possible. Use only the specificity that you need. For example don't use a div h2 when a h2 is all that's needed. Also FYI you can do something like a.block { display:block; } and then you won't need the div in the markup.

Answer 3

All you need here is:

a { color:black; text-decoration:none; }

Sometimes you'll want to get more specific and then you can be like:

a h2 { color:red; }