1 reply [Last post]
drfingerless's picture
Last seen: 1 year 24 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: 1 day 16 hours ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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.