将CSS选择器与：first-child组合

Question

Suppose some HTML contains the following div block:

<div id="messages">
    <div>
        <span>from user</span>
        <span>The content of the message</span>
        <time datetime="2017-02-15T19:21:20.848Z">10 hours ago</time>
    </div>
</div>

How could I style the "from user" text (and just that text) using CSS selectors? I tried to select the first-child element of the child div of div #messages using #messages>div:first-child , but that didn't work.

EDIT:

There was a small mistake in my syntax.

The proper CSS selector rule should be #messages>div>:first-child rather than what I tried earlier ( #messages>div:first-child ). The difference is in the > I missed after div .

Answer 1

Are you sure your div is called messages and not members ?

What you're looking for is:

#members > div > span:first-of-type

 #members > div > span:first-of-type { color: #f00; } 

 <div id="members"> <div> <span>from user</span> <span>The content of the message</span> <time datetime="2017-02-15T19:21:20.848Z">10 hours ago</time> </div> </div> 

Hope this helps :)

Answer 2

You're missing a space. You want the span that's the first child, not the div that's the first child.

Finds the first span:

#messages > div :first-child

Finds the first div:

#messages > div:first-child

Answer 3

The first-of-type selector would allow you to do that:

div#members span:first-of-type {
   color:#000;
}