CODEWITHSUNDEEP
csscss-selectors
funguy
funguy

Reputation: 2160

What is the difference at such classes targeting with css?

Let's say I want to target a span class element:

If I do like this, it doesn't have any effect:

ul#sponsors li span .spanelement {
}

But if I do like this:

ul#sponsors li span.spanelement {
}

It's working. What's the difference in here?

Upvotes: 0

Views: 47

Answers (3)

Th 00 mÄ s
Th 00 mÄ s

Reputation: 3826

Your second example has no space between span and spanelement. This CSS Selector statement therefor targets the span with the class "spanelement".

Example:

<span class="spanelement">

Adding a space changes the selector so that it selects all tags with a spanelement class INSIDE a span.

Example:

<span>
<spanelement\>
</span>

Upvotes: 1

Michael Sagalovich
Michael Sagalovich

Reputation: 2549

the first selects an element with class spanelement inside your spans, the second selects spans with class spanelement

so the first will match <p> here, while the second will match the span itself:

<ul id="sponsors"><li><span class="spanelement"><p class="spanelement">SOMETHING</p></span></li>/<ul>

if there is nothing inside the span, or the elements inside do not have class spanelement, then the first query will match nothing

Upvotes: 1

awm
awm

Reputation: 6570

This one:

ul#sponsors li span .spanelement { }

matches any element with class="spanelement", but it must be inside the span (which is inside an li inside a ul with id="sponsors").

This one:

ul#sponsors li span.spanelement { }

matches the <span class="spanelement"> itself (provided it's inside an li inside a ul with id="sponsors").

Upvotes: 3

Related Questions