Question

I was just playing around with a css ul for a menu. My initial css of

#nav ul {...}

did not work, but

ul#nav {...}

worked. What’s the reason for this?

Another similar question is what is the difference between:

div.grey

OR

div .grey

Notice the space between the two…

Answer 1

#nav ul looks for an ul element within an element having the id of “nav”.

<div id="nav">
  <ul>
    <li>Like me</li>
  </ul>
</div>

ul#nav looks for a ul that has the id value of “nav”.

<ul id="nav">
  <li>Like me</li>
</ul>

The same goes for classnames:

div.grey looks for a div element having the classname “grey”.

<div class="grey">Foo</div>

Whereas div .grey looks for any element having the classname “gey” within a div.

<div>
  <p class="grey">
    I'm special!
  </p>
</div>