Difference between concatenating id and html tag ie ul # nav vs #nav ul

Question

I just played with css ul for the menu. My starting css

#nav ul {...}

doesn't work but

ul#nav {...}

worked. What is the reason for this?

Another similar question is what is the difference between:

div.grey

OR

div .grey

Note the gap between the two ...

Answer 1

#nav ulSearches for an element ulinside the element with the identifier "nav".

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

ul#navsearches ulthat has the id value of "nav".

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

The same applies to classes:

div.greySearches for an element divthat has the class name gray.

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

While div .greylooking for any element that has the class name "gey" within div.

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

Answer 2

#nav ul {...}

ul id nav

ul#nav {...}

ul id nav

id no .

div.grey

div

div .grey

grey div

. Selectors

Answer 3

...

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

ul#nav means ul element having id nav

The same applies to the class examples that you showed.

See CSS Selectors in W3C