What does this css selector syntax mean?

Question

I have seen the syntax:

ul#nav li a
{
}

And im not really sure what it means, is it the same as saying:

#nav ul li a

?

I guess I dont really understand what it means to have an element type before an id selector with no space...

Answer 1

ul#nav will apply to <ul id="nav">

whereas:

#nav ul will apply to any <ul> within the <tag id="nav">

Answer 2

ul#nav li a will select:

• <a> elements...
• That are within a <li> element...
• That are within a <ul> with id attribute equal to nav.

It won't select descendants of any element that is not a <ul>, even if it's id is nav.

It is a bit redundant, as ids are unique. For all practical purposes, #nav li a will do.

---

Is it the same as saying: #nav ul li a?

Note that #nav ul li a is not the same, this would select the a within an li if it is a descendant ul of another element with id nav.

<div id="nav">
  <ul>
    <li><a>This would be selected</a></li>
  </ul>
<div>

<ul id="nav">
  <li><a>This would not be selected</a></li>
</ul>

---

I guess I dont really understand what it means to have an element type before an id selector with no space...

You can combine multiple selectors on one element. Here's a silly example:

a#message.error.active[rel="foobar"]:hover {}

This will select an <a> element with id="message" when it is hovered, only if it has the class error, as well as the class active, and it's rel attribute is foobar.

---

The basics are explained here: http://www.w3.org/TR/CSS2/selector.html