•  12-09-2019
  •  | 
  •  

Question 

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong:first-child {color:red;}
</style>
</head>

<body>

<div class="weather">
It's <strong>very</strong> hot and <strong>incredibly</strong> humid.
</div>

</body> </html>

Why only "very" is in color red while "incredibly" not since both of them are first child of the element specified by "div.weather strong"?

Was it helpful?

Solution

first-child means "an element that is the first child", not "the first child of this element."

So your example means "the strong that is the first child of div.weather".

If you want to make, say, the first word in all the <strong>s within the div come out red, you'll need to add some markup and do something like this:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>How to Write a Good Report</title>
<style type="text/css">
div.weather strong span:first-child {color:red;}
</style>
</head>

<body>

<div class="weather">
It's <strong><span>very</span> <span>very</span></strong> hot
and <strong><span>really</span> <span>incredibly</span></strong> humid.
</div>

</body> </html>

OTHER TIPS

Because the psuedo-selector doesn't do what you think it does.

It selects, in your stated example, the first child of the element .weather that is a <strong> element.

So only the first instance matches. I can't back this up with reference to the spec, since I'm lazy right now (busy day...), but I have this sort of vision in my head:

<html>

<div class="weather">

<p><strong>Lorem</strong> ipsum <strong>sit</strong> <em>amet</em> <span><a...>dolor</a><em>yadda yadda yadda</em></span> <a>something</a>, I'm not good at coming up with random text. Sorry...</p>

</html>

                                    Weather
                                       |
+----------------+---------------------+---------------+-------------------+.....
|                |                     |               |                   |
(first-child)  (second-child)      (third-child)      (fourth-child)   (fifth-child)
strong         strong                em                span                a
                                                        |
                                                +-------+--------+
                                                |                |
                                            first-child     second-child
                                                a                em

It's not the prettiest ascii example, I know, but it's how I think of it.

I think you've meant 

div.weather > strong {color:red;}

That will select children only (first level of nesting) rather than all descendants.

div.weather strong:first-child says to select the first strong element that is a child of weather, not all of the child elements of weather. It's only going to match a single element ever.

div.weather strong matches all of the strong elements that are descendants of weather. div.weather > strong matches all of the strong elements that are direct children of weather. div.weather * strong matches all of the strong elements that are grandchildren or later of weahter.

I think your understand of "first-child" is wrong. The first child is the the first element only. See the example at W3Schools.

Both strong elements are a child of the div but only the first one is the first strong child. So you just misunderstood the selector.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top