Help - Search - Members - Calendar
Full Version: can't select a range for hr element with nth-of-type
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Astoach167
the 1st hr to the 3rd hr element should be red, but its not, can someone tell me why?

CODE

<!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>


Christian J
They are red, but you can't see it unless you also give them some height.
pandy
Ignore... wacko.gif
pandy
AFAIU your syntax is correct. But it doesn't work. I tried with just a bunch of Ps to avoid HR complications. unsure.gif
Christian J
Works for me, in all my browsers. P also.
pandy
Jesus christ.... I hadn't closed my Ps. blush.gif

I think I spent half an hour on that. cool.gif
Christian J
But P end tags are optional, and now when I test without end tags it still works.
pandy
I had the tags, but I omitted the closing slash. blush.gif
Christian J
Me I just copied the OP's code. happy.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.