The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> can't select a range for hr element with nth-of-type
Astoach167
post Jan 12 2020, 09:50 PM
Post #1





Group: Members
Posts: 1
Joined: 12-January 20
Member No.: 27,119



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>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 8)
Christian J
post Jan 13 2020, 06:34 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



They are red, but you can't see it unless you also give them some height.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2020, 06:46 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Ignore... wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2020, 12:49 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



AFAIU your syntax is correct. But it doesn't work. I tried with just a bunch of Ps to avoid HR complications. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 13 2020, 07:44 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Works for me, in all my browsers. P also.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 13 2020, 09:11 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Jesus christ.... I hadn't closed my Ps. blush.gif

I think I spent half an hour on that. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 14 2020, 06:24 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



But P end tags are optional, and now when I test without end tags it still works.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2020, 11:34 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I had the tags, but I omitted the closing slash. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 14 2020, 01:40 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Me I just copied the OP's code. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:07 AM