CODEWITHSUNDEEP
csscss-selectors
Benny Tjia
Benny Tjia

Reputation: 4883

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

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.

Upvotes: 5

Views: 509

Answers (2)

Timo
Timo

Reputation: 3414

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>

Upvotes: 4

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263009

#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>

Upvotes: 9

Related Questions