Geek Answers Handbook

A: link around div-styling inside div

I have a div for which I want to be clickable, so I wrapped the "a" tag around it, since it is valid HTML 5 and made the div a block level element.

Now the problem I am facing is the style of the content inside this div, since everything is displayed as a link, and despite the many methods, I have not found a good solution for the custom style inside the div.

Here you can see the given test sample:

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

So my question basically is what is the best way to style elements like h2 and p that are inside the level of the div block that is wrapped with a: link.

0
source share
3 answers

All you need is:

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

Sometimes you need to get more specific information, and then you can:

 a h2 { color:red; }
+1
source

Basically, what happens to you is that all the elements under the <a> tag inherit the css properties of the hyperlink (underline, blue, etc.)

To counter this, create an identifier or class in your tag and remove / override the default binding properties.

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

After that, redefine the pseudo-classes associated with Link:: link ,: visited ,: hover and : active .

+1
source

The best way is a matter of opinion. For me, the best way would be to use the most concise CSS. Use only the specificity you need. For example, do not use a div h2 when a h2 is required. Also FYI you can do something like a.block { display:block; } a.block { display:block; } , and then you don’t need a div in the markup.

0
source

More articles:


All Articles