Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ can't select a range for hr element with nth-of-type
Posted by: Astoach167 Jan 12 2020, 09:50 PM
the 1st hr to the 3rd hr element should be red, but its not, can someone tell me why?
<!DOCTYPE html>
<html>
<head>
<style>
hr:nth-of-type(n+1):nth-of-type(-n+3){
background: red;
}
</style>
</head>
<body>
<hr />
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<hr />
<hr />
<hr />
<p>The fourth paragraph.</p>
</body>
</html>
Posted by: Christian J Jan 13 2020, 06:34 AM
They are red, but you can't see it unless you also give them some height.
Posted by: pandy Jan 13 2020, 06:46 AM
Ignore... 
Posted by: pandy Jan 13 2020, 12:49 PM
AFAIU your syntax is correct. But it doesn't work. I tried with just a bunch of Ps to avoid HR complications. 
Posted by: Christian J Jan 13 2020, 07:44 PM
Works for me, in all my browsers. P also.
Posted by: pandy Jan 13 2020, 09:11 PM
Jesus christ.... I hadn't closed my Ps. 
I think I spent half an hour on that. 
Posted by: Christian J Jan 14 2020, 06:24 AM
But P end tags are optional, and now when I test without end tags it still works.
Posted by: pandy Jan 14 2020, 11:34 AM
I had the tags, but I omitted the closing slash.
Posted by: Christian J Jan 14 2020, 01:40 PM
Me I just copied the OP's code. 
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)