Question

Let’s say I have some deeply nested markup that I want to target with CSS. It could be anything, but for example:

<div>
    <div id='someid'>
        <span class='someclass'>
            <a class='link' href='alink'>Go somewhere</a>
        </span>
    </div>
<div>

Is it acceptable to write a CSS rule targeting the <a> tag directly, like this?

a.link { font-size: large; }

Or is this considered non-standard that may fail in some browsers? Do I need to target each element in the chain like this?

div div span.someclass a.link { font-size: large; }

Answer 1

Both are completely acceptable to use and the answer depends on your specific solution. For instance if you have other areas where you are sharing common properties that are defined by that class you’d want to keep it as general as possible. If for instance you have a navigation and the links in that area share some common elements those could be defined by a.link

Then in your nested html, you might do something like

.someclass a.link {font-size:8px} to make that text smaller.

Here is an article that discusses how the specificity works: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/