CSS3 selector to find the 2nd div of the same class

Question

I need a CSS selector that can find the 2nd div of 2 that has the same class  I ve looked at nth-child   but it s not what I want since I can t see a way to further clarify what class I want  These 2 divs will be siblings in the document if that helps   My HTML looks something like this    lt div class  foo  gt     lt  div gt   lt div class  bar  gt     lt  div gt   lt div class  baz  gt     lt  div gt   lt div class  bar  gt     lt  div gt    And I want the 2nd div bar  or the last div bar would work too

User · Answer

And for people who are looking for a jQuery compatible answer:

$('.foo:eq(1)').css('color', 'red');

HTML:

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...

User · Answer

First you must select the parent  element and set  nth-of-type n  for the parent and then select the element you want  something like this     topmenu li nth-of-type 2  ul childUl     This will  select the second submenu from topmenu   topmenu li is the parent element   HTML    lt ul id  topmenu  gt       lt li gt           lt ul class  childUl  gt               lt li gt  lt  li gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt           lt ul class  childUl  gt               lt li gt  lt  li gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt           lt ul class  childUl  gt               lt li gt  lt  li gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt

User · Answer

My original answer regarding  nth-of-type is simply wrong  Thanks to Paul for pointing this out   The word  type  there refers only to the  element type   like div   It turns out that the selectors div bar nth-of-type 2  and div nth-of-type 2  bar mean the same thing  Both select elements that  a  are the second div of their parent  and  b  have class bar   So the only pure CSS solution left that I m aware of  if you want to select all elements of a certain selector except the first  is the general sibling selector    bar    bar   http   www w3schools com cssref sel gen sibling asp    My original  wrong  answer follows   With the arrival of CSS3  there is another option  It may not have been available when the question was first asked    bar nth-of-type 2    http   www w3schools com cssref sel nth-of-type asp  This selects the second element that satisfies the  bar selector   If you want the second and last of a specific kind of element  or all of them except the first   the general sibling selector would also work fine    bar    bar   http   www w3schools com cssref sel gen sibling asp  It s shorter  But of course  we don t like to duplicate code  right   -

User · Answer

What exactly is the structure of your HTML    The previous CSS will work if the HTML is as such   CSS   foo nth-child 2    HTML   lt div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt       lt  div gt    But if you have the following HTML it will not work    lt div gt    lt div class  other  gt  lt  div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt        lt  div gt    Simple put  there is no selector for the getting the index of the matches from the rest of the selector before it

User · Answer

UPDATE  This answer was originally written in 2008 when nth-of-type support was unreliable at best  Today I d say you could safely use something like  bar nth-of-type 2   unless you have to support IE8 and older      Original answer from 2008 follows  Note that I would not recommend this anymore     If you can use Prototype JS you can use this code to set some style values  or add another classname      set style      div theclassname   1  setStyle   backgroundColor    900   fontSize   1 2em         OR add class name      div theclassname   1  addClassName  secondclass       pun intentded       I didn t test this code  and it doesn t check if there actually is a second div present  but something like this should work    But if you re generating the html serverside you might just as well add an extra class on the second item

User · Answer

HTML   lt h1 gt  Target Bar Elements  lt  h1 gt    lt div class  foo  gt Foo Element lt  div gt   lt div class  bar  gt Bar Element lt  div gt   lt div class  baz  gt Baz Element lt  div gt   lt div class  bar  gt Bar Second Element lt  div gt   lt div class  jar  gt Jar Element lt  div gt   lt div class  kar  gt Kar Element lt  div gt   lt div class  bar  gt Bar Third Element lt  div gt    CSS   bar  background red    bar  bar  background green    bar  bar  bar  background yellow     DEMO https   jsfiddle net ssuryar 6ka13xve

User · Answer

My original answer regarding  nth-of-type is simply wrong  Thanks to Paul for pointing this out   The word  type  there refers only to the  element type   like div   It turns out that the selectors div bar nth-of-type 2  and div nth-of-type 2  bar mean the same thing  Both select elements that  a  are the second div of their parent  and  b  have class bar   So the only pure CSS solution left that I m aware of  if you want to select all elements of a certain selector except the first  is the general sibling selector    bar    bar   http   www w3schools com cssref sel gen sibling asp    My original  wrong  answer follows   With the arrival of CSS3  there is another option  It may not have been available when the question was first asked    bar nth-of-type 2    http   www w3schools com cssref sel nth-of-type asp  This selects the second element that satisfies the  bar selector   If you want the second and last of a specific kind of element  or all of them except the first   the general sibling selector would also work fine    bar    bar   http   www w3schools com cssref sel gen sibling asp  It s shorter  But of course  we don t like to duplicate code  right   -

User · Answer

Is there a reason that you can t do this via Javascript  My advice would be to target the selectors with a universal rule   foo  and then parse back over to get the last foo with Javascript and set any additional styling you ll need   Or as suggested by Stein  just add two classes if you can    lt div class  foo  gt  lt  div gt   lt div class  foo last  gt  lt  div gt    foo     foo last

User · Answer

Selectors can be combined    bar nth-child 2    means  thing that has class bar  that is also the 2nd child

User · Answer

HTML   lt h1 gt  Target Bar Elements  lt  h1 gt    lt div class  foo  gt Foo Element lt  div gt   lt div class  bar  gt Bar Element lt  div gt   lt div class  baz  gt Baz Element lt  div gt   lt div class  bar  gt Bar Second Element lt  div gt   lt div class  jar  gt Jar Element lt  div gt   lt div class  kar  gt Kar Element lt  div gt   lt div class  bar  gt Bar Third Element lt  div gt    CSS   bar  background red    bar  bar  background green    bar  bar  bar  background yellow     DEMO https   jsfiddle net ssuryar 6ka13xve

User · Answer

parent class div first-child   div   I just used the above to find the second div by chaining first-child with the   selector

User · Answer

Selectors can be combined    bar nth-child 2    means  thing that has class bar  that is also the 2nd child

User · Answer

Selectors can be combined    bar nth-child 2    means  thing that has class bar  that is also the 2nd child

User · Answer

Is there a reason that you can t do this via Javascript  My advice would be to target the selectors with a universal rule   foo  and then parse back over to get the last foo with Javascript and set any additional styling you ll need   Or as suggested by Stein  just add two classes if you can    lt div class  foo  gt  lt  div gt   lt div class  foo last  gt  lt  div gt    foo     foo last

User · Answer

Selectors can be combined    bar nth-child 2    means  thing that has class bar  that is also the 2nd child

User · Answer

UPDATE  This answer was originally written in 2008 when nth-of-type support was unreliable at best  Today I d say you could safely use something like  bar nth-of-type 2   unless you have to support IE8 and older      Original answer from 2008 follows  Note that I would not recommend this anymore     If you can use Prototype JS you can use this code to set some style values  or add another classname      set style      div theclassname   1  setStyle   backgroundColor    900   fontSize   1 2em         OR add class name      div theclassname   1  addClassName  secondclass       pun intentded       I didn t test this code  and it doesn t check if there actually is a second div present  but something like this should work    But if you re generating the html serverside you might just as well add an extra class on the second item

User · Answer

UPDATE  This answer was originally written in 2008 when nth-of-type support was unreliable at best  Today I d say you could safely use something like  bar nth-of-type 2   unless you have to support IE8 and older      Original answer from 2008 follows  Note that I would not recommend this anymore     If you can use Prototype JS you can use this code to set some style values  or add another classname      set style      div theclassname   1  setStyle   backgroundColor    900   fontSize   1 2em         OR add class name      div theclassname   1  addClassName  secondclass       pun intentded       I didn t test this code  and it doesn t check if there actually is a second div present  but something like this should work    But if you re generating the html serverside you might just as well add an extra class on the second item

User · Answer

What exactly is the structure of your HTML    The previous CSS will work if the HTML is as such   CSS   foo nth-child 2    HTML   lt div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt       lt  div gt    But if you have the following HTML it will not work    lt div gt    lt div class  other  gt  lt  div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt        lt  div gt    Simple put  there is no selector for the getting the index of the matches from the rest of the selector before it

User · Answer

parent class div first-child   div   I just used the above to find the second div by chaining first-child with the   selector

User · Answer

What exactly is the structure of your HTML    The previous CSS will work if the HTML is as such   CSS   foo nth-child 2    HTML   lt div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt       lt  div gt    But if you have the following HTML it will not work    lt div gt    lt div class  other  gt  lt  div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt        lt  div gt    Simple put  there is no selector for the getting the index of the matches from the rest of the selector before it

User · Answer

First you must select the parent  element and set  nth-of-type n  for the parent and then select the element you want  something like this     topmenu li nth-of-type 2  ul childUl     This will  select the second submenu from topmenu   topmenu li is the parent element   HTML    lt ul id  topmenu  gt       lt li gt           lt ul class  childUl  gt               lt li gt  lt  li gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt           lt ul class  childUl  gt               lt li gt  lt  li gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt           lt ul class  childUl  gt               lt li gt  lt  li gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt

User · Answer

Is there a reason that you can t do this via Javascript  My advice would be to target the selectors with a universal rule   foo  and then parse back over to get the last foo with Javascript and set any additional styling you ll need   Or as suggested by Stein  just add two classes if you can    lt div class  foo  gt  lt  div gt   lt div class  foo last  gt  lt  div gt    foo     foo last

User · Answer

Is there a reason that you can t do this via Javascript  My advice would be to target the selectors with a universal rule   foo  and then parse back over to get the last foo with Javascript and set any additional styling you ll need   Or as suggested by Stein  just add two classes if you can    lt div class  foo  gt  lt  div gt   lt div class  foo last  gt  lt  div gt    foo     foo last

User · Answer

UPDATE  This answer was originally written in 2008 when nth-of-type support was unreliable at best  Today I d say you could safely use something like  bar nth-of-type 2   unless you have to support IE8 and older      Original answer from 2008 follows  Note that I would not recommend this anymore     If you can use Prototype JS you can use this code to set some style values  or add another classname      set style      div theclassname   1  setStyle   backgroundColor    900   fontSize   1 2em         OR add class name      div theclassname   1  addClassName  secondclass       pun intentded       I didn t test this code  and it doesn t check if there actually is a second div present  but something like this should work    But if you re generating the html serverside you might just as well add an extra class on the second item

User · Answer

What exactly is the structure of your HTML    The previous CSS will work if the HTML is as such   CSS   foo nth-child 2    HTML   lt div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt       lt  div gt    But if you have the following HTML it will not work    lt div gt    lt div class  other  gt  lt  div gt    lt div class  foo  gt  lt  div gt    lt div class  foo  gt Find me lt  div gt        lt  div gt    Simple put  there is no selector for the getting the index of the matches from the rest of the selector before it

User · Answer

And for people who are looking for a jQuery compatible answer:

$('.foo:eq(1)').css('color', 'red');

HTML:

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...

[css] CSS3 selector to find the 2nd div of the same class

Examples related to css