How to select the first second or third element with a given class name

Question

How can I select a certain element in a list of elements  I have the following    lt div class  myclass  gt my text1 lt  div gt   lt  -- some other code follows -- gt   lt div gt       lt p gt stuff lt  p gt   lt  div gt   lt div gt       lt p gt more stuff lt  p gt   lt  div gt   lt p gt       lt span gt Hello World lt  span gt   lt  p gt   lt div class  myclass  gt my text2 lt  div gt   lt  -- some other code follows -- gt   lt div gt       lt p gt stuff lt  p gt   lt  div gt   lt p gt       lt span gt Hello World lt  span gt   lt  p gt   lt input type     gt   lt div class  myclass  gt my text3 lt  div gt   lt  -- some other code follows -- gt   lt div gt       lt p gt stuff lt  p gt   lt  div gt   lt footer gt The end lt  footer gt    I have the CSS class div myclass  doing things  that applies to all  obviously  but I also wanted to be able to select the first  second  or third div of class  myclass like this  regardless of where they are in the markup    div myclass first  color  000    div myclass second  color  FFF    div myclass third  color  006     Almost like the jQuery index selection  eq  index    which is what I am using currently  but I need a no-script alternative   To be specific  I am looking for pseudo selectors  not things like adding another class or using IDs to make things work

User · Answer

This isn t so much an answer as a non-answer  i e  an example showing why one of the highly voted answers above is actually wrong   I thought that answer looked good  In fact  it gave me what I was looking for   nth-of-type which  for my situation  worked   So  thanks for that   Bdwey    I initially read the comment by  BoltClock  which says that the answer is essentially wrong  and dismissed it  as I had checked my use case  and it worked  Then I realized  BoltClock had a reputation of 300 000     and has a profile where he claims to be a CSS guru  Hmm  I thought  maybe I should look a little closer   Turns out as follows  div myclass nth-of-type 2  does NOT mean  the 2nd instance of div myclass   Rather  it means  the 2nd instance of div  and it must also have the  myclass  class   That s an important distinction when there are intervening divs between your div myclass instances   It took me some time to get my head around this  So  to help others figure it out more quickly  I ve written an example which I believe demonstrates the concept more clearly than a written description  I ve hijacked the h1  h2  h3 and h4 elements to essentially be divs  I ve put an A class on some of them  grouped them in 3 s  and then colored the 1st  2nd and 3rd instances blue  orange and green using h  A nth-of-type      But  if you re reading carefully  you should be asking  the 1st  2nd and 3rd instances of what     I also interjected a dissimilar  i e  different h level  or similar  i e  same h level  un-classed element into some of the groups   Note  in particular  the last grouping of 3  Here  an un-classed h3 element is inserted between the first and second h3 A elements  In this case  no 2nd color  i e  orange  appears  and the 3rd color  i e  green  shows up on the 2nd instance of h3 A  This shows that the n in h3 A nth-of-type n  is counting the h3s  not the h3 As   Well  hope that helps  And thanks   BoltClock    x000D   x000D  div   x000D    margin-bottom  2em  x000D    border  red solid 1px  x000D    background-color  lightyellow  x000D    x000D   x000D  h1  x000D  h2  x000D  h3  x000D  h4   x000D    font-size  12pt  x000D    margin  5px  x000D    x000D   x000D  h1 A nth-of-type 1   x000D  h2 A nth-of-type 1   x000D  h3 A nth-of-type 1    x000D    background-color  cyan  x000D    x000D   x000D  h1 A nth-of-type 2   x000D  h2 A nth-of-type 2   x000D  h3 A nth-of-type 2    x000D    background-color  orange  x000D    x000D   x000D  h1 A nth-of-type 3   x000D  h2 A nth-of-type 3   x000D  h3 A nth-of-type 3    x000D    background-color  lightgreen  x000D    x000D   lt div gt  x000D     lt h1 class  A  gt h1 A  1 lt  h1 gt  x000D     lt h1 class  A  gt h1 A  2 lt  h1 gt  x000D     lt h1 class  A  gt h1 A  3 lt  h1 gt  x000D   lt  div gt  x000D   x000D   lt div gt  x000D     lt h2 class  A  gt h2 A  1 lt  h2 gt  x000D     lt h4 gt this intervening element is a different type  i e  h4 not h2 lt  h4 gt  x000D     lt h2 class  A  gt h2 A  2 lt  h2 gt  x000D     lt h2 class  A  gt h2 A  3 lt  h2 gt  x000D   lt  div gt  x000D   x000D   lt div gt  x000D     lt h3 class  A  gt h3 A  1 lt  h3 gt  x000D     lt h3 gt this intervening element is the same type  i e  h3  but has no class lt  h3 gt  x000D     lt h3 class  A  gt h3 A  2 lt  h3 gt  x000D     lt h3 class  A  gt h3 A  3 lt  h3 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use CSS nth-child with the prefix class name div myclass nth-child 1      color   000     div myclass nth-child 2      color   FFF     div myclass nth-child 3      color   006

User · Answer

use nth-child item number  EX   lt div class  parent class  gt       lt div class  myclass  gt my text1 lt  div gt      some other code containers          lt div class  myclass  gt my text2 lt  div gt      some other code containers          lt div class  myclass  gt my text3 lt  div gt      some other code containers     lt  div gt   parent class nth-child 1        parent class nth-child 2        parent class nth-child 3         OR   nth-of-type item number  same your code   myclass nth-of-type 1        myclass nth-of-type 2        myclass nth-of-type 3

User · Answer

Perhaps using the     selector of CSS    myclass       background  red      myclass  myclass       background  yellow      myclass  myclass  myclass       background  green      See my example on jsfiddle

User · Answer

You probably finally realized this between posting this question and today  but the very nature of selectors makes it impossible to navigate through hierarchically unrelated HTML elements   Or  to put it simply  since you said in your comment that     there are no uniform parent containers       it s just not possible with selectors alone  without modifying the markup in some way as shown by the other answers   You have to use the jQuery  eq   solution

User · Answer

Yes  you can do this   For example  to style the td tags that make up the different columns of a table you could do something like this   table myClass tr  gt  td first-child    First column           some style here      table myClass tr  gt  td first-child td    Second column           some style here      table myClass tr  gt  td first-child td td    Third column           some style here

User · Answer

In the future  perhaps  you will be able to use  nth-child an b of s  Actually  browser support for the    of    filter is very limited  Only Safari seems to support the syntax  https   css-tricks com almanac selectors n nth-child

[css] How to select the first, second, or third element with a given class name?

Examples related to css

Examples related to css-selectors

Examples related to pseudo-class