What does the CSS “.x-data .x-time span” mean?

What does the following CSS syntax mean?开发者_开发百科

.x-data .x-time span

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.

It targets the span elements inside elements with class "x-time", which, themselves, are also inside element with class="x-data".

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.

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?

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>