Targeting nested elements with CSS

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/

Answer 2

Both are perfectly valid, and which one you use depends on what you want to do.

If you are creating a generic class that you want to be able to use throughout your entire site regardless of element and where the element is, you should only use .class. A good example for this is something like .icon which you may want to use on links, list items, headings etc. And you want to be able to use them everywhere.

If you're creating a class that is specific to/only works on one certain type element, it's best to use the element in the selector as well. An example of this would be a bullet list you want to display on one line, since this class requires the HTML to be a <ul> you should specify it in the CSS as well; ul.inline. This way you can use the "inline" class name for other elements as well, without the styling affecting both.

If you're only using the class in order to select the element but it shouldn't have any generic styling you should be specific. For example, you may want the first paragraph in your #blog-post element to be larger, then you should specify both #blog-post and the class; #blog-post p.first (note that these types of classes are rarely needed anymore thanks to advanced selectors like :first-of-type, h2 + p etc).

Saying that ".link is the best, a.link is second best and a long selector is bad" is just wrong. It all depends on the situation.

Answer 3

The more targeted you make your CSS the less flexible it becomes. It's your own trade off. If you are going to give the links a specific class like that I am pretty sure they'll be visually the same whether they appear inside this tree or outside of it so you can stick with your first example.

Answer 4

It's actually recommended to use a.link instead of the long, ugly second option, which can cause specificity and performance issues.

It's even better if you use just .link. That's the best option.

Answer 5

a.link is the best way to do it. If you want a certain a.link to be different from the rest, you'll need to add some weight to it.

a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */

Descendant selectors (line 2) aren't the most efficient way to add style to an element, so use them sparingly. Personally, I use them when I need to give special styles to a Global Class within a certain ID/Class.