Difference between concatenating the id and html tag i.e. ul#nav vs #nav ul

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>

Answer 2

#nav ul {...}

selects ul elements inside an element with id nav

ul#nav {...}

select a ul element with id nav

When you are using an id selector no need to use a tag selector.

div.grey

select a div element with class name grey

div .grey

selects all elements with class name grey inside all div elements

For detailed reading see Selectors

Answer 3

...

#nav ul {...} means ul inside an element having id nav

ul#nav means ul element having id nav

Same is the case with classes example you have shown.

See CSS Selectors at W3C