1 reply [Last post]
drfingerless's picture
Last seen: 3 years 25 weeks 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's picture
Last seen: 39 weeks 6 days ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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.


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