1 reply [Last post]
drfingerless
drfingerless's picture
Offline
newbie
Last seen: 25 weeks 6 days ago
Timezone: GMT+10
Joined: 2018-06-14
Posts: 1
Points: 2

I have some HTML that looks like this:

<div class="chicken">content</div>
<div class="chicken">content</div>
<div class="egg">content</div>
<div class="egg">content</div>
<div class="chicken">content</div>
<div class="egg">content</div>
<div class="chicken">content</div>

My question is how can I target the third chicken-classed div specifically?
I've tried various nth-child and nth-of-type configurations to no avail.
For example I thought that .chicken:nth-of-type(3) would do the trick but somehow all the eggs are being counted along with the chickens. This HTML is dynamically created so I need a rule that will work for every third chicken regardless of how many eggs appear in the list. Any clues?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 10 hours 35 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9714
Points: 3790

Surprised me

I guess nth-of-type only applies to elements. I use those properties for tables and had not tried by class, etc..

Since your elements' content is filled dynamically, have you tried counting your chickens as you generate them? When you hit your magic number, give that element a class or id, whichever is appropriate.

That solution seems to me to be the more robust.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.