Difference between "#someid ul li.someclass a" and "#someid ul li .someclass a" ? (notice the whitespace)

Question

I dont have much experiences in CSS, but recently i found out that there is a difference between having a whitespace before a class selector and without having one. So far, I only know that they are interpreted as two different things...Can somebody experienced in CSS explains to me what the particular difference is? Does this also apply to id selector?

Thanks. appreciate your answers.

Answer 1

#someid ul li.someclass a means

Anchors that are descendants of
list items that have the class someclass and are themselves descendants of
unordered lists that are descendants of
the element with ID someid.

#someid ul li .someclass a means

Anchors that are descendants of
any elements that have the class someclass and are themselves descendants of
list items that are descendants of
unordered lists that are descendants of
the element with ID someid.

So, the <a> element in the following markup is matched by the first rule, but not by the second:

<div id="someid">
    <ul>
        <li class="someclass">
            <a href="foo.html" />
        </li>
    </ul>
</div>

And the <a> element in the following markup is matched by the second rule, but not by the first:

<div id="someid">
    <ul>
        <li>
            <span class="someclass">
                <a href="foo.html" />
            </span>
        </li>
    </ul>
</div>

Answer 2

Two examples:

#someid ul li.someclass a will hit the anchor tag in this example

<div id="someid">
  <ul>
    <li class="someclass">
      <a href="http://www.example.com">link</a>
    </li>
  </ul>
</div>

#someid ul li .someclass a will hit the anchor tag in this example

<div id="someid">
  <ul>
    <li>
      <div class="someclass">
        <a href="http://www.example.com">link</a>
      </div>
    </li>
  </ul>
</div>

Also notice that this will hit both of them:

<div id="someid">
  <ul>
    <li class="someclass">
      <div class="someclass">
        <a href="http://www.example.com">link</a>
      </div>
    </li>
  </ul>
</div>