seletor de CSS3 para encontrar o 2º div da mesma classe

Question

Eu preciso de um seletor CSS que pode encontrar o 2º div de 2 que tem a mesma classe. Eu olhei nth-child() mas não é o que eu quero porque eu não posso ver uma maneira de esclarecer qual classe eu quero. Estes 2 divs será irmãos no documento se isso ajuda.

O meu HTML é algo como isto:

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

E eu quero o 2º div.bar (ou o último div.bar iria trabalhar muito).

Answer 1

Atualizar : Essa resposta foi originalmente escrito em 2008, quando o apoio nth-of-type não era confiável na melhor das hipóteses. Hoje eu diria que você pode usar com segurança algo como .bar:nth-of-type(2), a menos que você tem de apoiar IE8 e mais velhos.

---

resposta original a partir de 2008 segue (note que eu não recomendaria isso mais!) :

Se você pode usar Prototype JS você pode usar este código para definir alguns valores de estilo, ou adicionar outro classname :

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(Eu não testei este código, e não verificar se há realmente uma segunda div presente, mas algo como isso deve funcionar.)

Mas se você está gerando o serverside html que você pode muito bem adicionar uma classe extra no segundo item ...

Answer 2

selectores podem ser combinados:

.bar:nth-child(2)

significa "coisa que tem classe bar ", que também é o segundo filho.

Answer 3

A minha resposta original sobre :nth-of-type é simplesmente errado. Graças ao Paul para apontar isto.

A palavra "tipo" não se refere apenas ao "tipo de elemento" (como div). Acontece que o div.bar:nth-of-type(2) seletores e div:nth-of-type(2).bar significam a mesma coisa. Ambos os elementos SELECT que [a] são a segunda div de seu pai, e [b] têm classe bar.

Portanto, a solução CSS única pura deixou que eu estou ciente de, se você quiser selecionar todos os elementos de um determinado seletor, exceto o primeiro, é o seletor irmão em geral:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

---

meu original (errado) resposta seguinte forma:

Com a chegada do CSS3, não há outra opção. Pode não ter estado disponível quando a pergunta foi feita em primeiro lugar:

.bar:nth-of-type(2)

http://www.w3schools.com/cssref/sel_nth-of- type.asp

isto selecciona o segundo elemento que satisfaz o selector .bar.

Se você deseja que o segunda e última de um tipo específico de elemento (ou todos eles, exceto a primeira), o seletor irmão em geral também funcionaria bem:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

É mais curto. Mas, claro, nós não gostamos de código duplicado, certo? : -)

Answer 4

O que é exatamente a estrutura do seu HTML?

O CSS anterior funcionará se o HTML é como tal:

CSS

.foo:nth-child(2)

HTML

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

Mas se você tem o seguinte HTML não vai funcionar.

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

put simples, não há selector para a obtenção do índice das partidas do resto do seletor antes.

Answer 5

HTML

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

CSS

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

DEMONSTRA https://jsfiddle.net/ssuryar/6ka13xve/

Answer 6

E para as pessoas que estão à procura de uma resposta compatível jQuery:

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

HTML:

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

Answer 7

Existe uma razão que você não pode fazer isso via JavaScript? Meu conselho seria para atingir os seletores com uma regra universal (.foo) e em seguida, analisar de volta para obter o último foo com Javascript e definir qualquer estilo adicional que você precisa.

Ou, como sugerido por Stein, basta adicionar duas classes se você pode:

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

Eu apenas usei o acima para encontrar o segundo div encadeando primeira criança com o selector +.