1

Possible Duplicate:
CSS Child vs Descendant selectors

So, what's the difference here?

div a {
  /* Styles here */
}

and

div > a {
  /* Styles here */
}

I really don't understand.

Community
  • 1
  • 1
Lucas
  • 16,930
  • 31
  • 110
  • 182
  • http://fiddle.jshell.net/7pn7z/ more: http://www.w3.org/TR/CSS2/selector.html#child-selectors – yckart Sep 16 '12 at 00:35

2 Answers2

3

space is the descendant combinator, while > is the child combinator. Child means direct descendant, descendant means a node somewhere in the subtree of the parent element, no matter how deep.

Sergiu Dumitriu
  • 11,455
  • 3
  • 39
  • 62
2

To put it in plain words:

div a {/*properties*/}

This would select and apply the given style to all the 'a' elements in a 'div'.

The '>' symbol is the 'Child Combinator': 
div > a {/*properties*/}

This will select only the direct child 'a' tags inside the div.

For instance:
css:

div > a {color: red}

html:

<div>
    <a href="#">Link One</a>
    <span>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>
    </span>
    <a href="#">Link Four</a>
</div>

Here, red color will only be applied to 'Link one' and 'Link Four'. 'Link Two' & 'Link Three' are not selected since they are nested inside a 'span' element.


Play around with them: http://dabblet.com/gist/3730661

You can read more about CSS selectors here: http://css-tricks.com/child-and-sibling-selectors/

carpenumidium
  • 1,193
  • 11
  • 18