Menu
<!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"?
991
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.
152
I think you've meant
div.weather > strong {color:red;}
That will select children only (first level of nesting) rather than all descendants.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
