Hi all:
What does the following css syntax mean?
.x-data .x-time span
Thanks.
+6
A:
It targets the span elements inside elements with class "x-time", which, themselves, are also inside element with class="x-data".
pixeline
2010-08-31 10:59:49
A:
any element with a class of '.x-data' containing any element with a class of '.x-time' containing any <span> will be styled.
eg.
<p class="x-data">
lipsum
<span class="x-time">
<span>lipsum</span> <!-- only this guy is styled -->
<strong>sdadsa</strong>
</span>
<span>dolor</span>
</p>
Moin Zaman
2010-08-31 11:00:07
That's backwards, it's a descendent selector, not an ancestor selector :)
David Dorward
2010-08-31 11:01:59
may be just his structure is mixed up, this looks like the element is targetted, where as, i am sure he meant it to be span...
iamserious
2010-08-31 11:05:13
@Noon Silk - this is wrong because it's not the element with a class of `x-data` that gets selected, it's the `span`.
Graham Clark
2010-08-31 11:05:48
@David: sorry mate, you're wrong! I just added a code sample to explain it better. Its definitely not backwards they way I explained it first. Also I realise now that SO's textarea simply ate up my span because i didnt do the inline tilde character
Moin Zaman
2010-08-31 11:06:54
Your example is correct but your description implies it is the element with the class 'x-data' that is going to be targeted.
Andy Rose
2010-08-31 11:07:05
wrong. its the other way!
iamserious
2010-08-31 16:35:42
omg, what is with the way I've explained it that you guys find hard to read and understand? It's not wrong!
Moin Zaman
2010-08-31 18:33:36
well, when so many people are saying its wrong, there has to be something to it right? look at your sentence, it says: "any element with (...) will be targeted". In plain English, it means that the element is targeted. Sorry for picking up on you but I am just doing it so you will realize and not repeat this same thing again.
iamserious
2010-09-02 16:42:39
@iamserious: I think I see it now. I've replaced targetted with styled. The targeted is referring to the first element .xdata which was wrong
Moin Zaman
2010-09-03 08:29:40
+3
A:
Selects any span element that is a descendant of any element with a class attribute that contains the word x-time that is a descendant of any element with a class attribute that contains the word x-data.
via SelectOracle. I recommend giving Selectutorial a read too.
David Dorward
2010-08-31 11:00:36
+8
A:
it is a selector for a span that resides in a div (or anything) with class .x-time, which inturn is nested inside a class .x-data
for example, if you had the css like:
.x-data .x-time span {
font-size: 12px;
color: red;
}
and then a structure like this:
<div class="x-data">
<div class="x-time">
Time: <span>12:00</span>
</div>
</div>
then the 12:00 is going to be in font size 12, and in red. where as "Time:" part is just going to follow the inherited format.
iamserious
2010-08-31 11:03:18
+1
A:
its like saying Donkey's Tail's Hair.
so .x-data will be donkey
.x-time will be tail
span will be hair!!
so .x-data's .x-time's span.
get it?
LocustHorde
2010-08-31 13:01:57