nth-child or nth-of-type or something else?

[drfingerless]

I’ve got some HTML that looks like this:

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

How do I target the third chicken classed div specifically?

[drfingerless]

I put my html inside the three back-ticks but it seems to have disappeared. Some advice on posting?

[Shikkediel]

Test…

Nope, no advice to be given I think. Used to work that way. It seems to be filtering out all HTML.

[Shikkediel]

I don’t think there is a “nth instance of a class” selector in CSS by the way.

[chris_2080]

neither nor..

try something like this

$(".chicken").filter(function(index, element){
    return index % 3 == 2;
}).addClass("third");

[drfingerless]

Hey chris_2080, thanks for this however I am not a coder as such which is why I was looking for a CSS solution. According to Shikkediel there may not be one… Your (jQuery?) solution may work but I will need to get a little help in working out how to use it.

[chris_2080]

ok, jQuery is not needed, put this script into your html at the end of body between script tag

var thirdChicken = document.getElementsByClassName("chicken")[2];
  /* do something with thirdChicken */ 

what is your goal?

[Paulie_D]

I don’t think there is a “nth instance of a class” selector in CSS by the way.

This is correct.

https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector

[Author]

Posts