Necesito un selector CSS que puede encontrar la 2da div de 2 que tiene la misma clase. He mirado en nth-child() pero no es lo que quiero ya no puedo ver una manera de aclarar qué clase de deseo. Estos 2 divs serán hermanos en el documento si que ayuda.

Mi HTML se ve algo como esto:

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

Y quiero la 2ª div.bar (o de la última div.barra de trabajar demasiado).

InformationsquelleAutor mpeters | 2008-11-20

8 Comentarios

  1. 25

    ACTUALIZACIÓN: Esta respuesta fue escrito originalmente en 2008, cuando nth-of-type apoyo era poco fiable en el mejor. Hoy en día yo diría que con seguridad podría utilizar algo como .bar:nth-of-type(2), a menos que usted tiene para apoyar IE8 y mayores.


    Respuesta Original a partir de 2008 de la siguiente manera (se Nota que no te lo recomiendo ya!):

    Si se puede usar Prototype JS puede utilizar este código para establecer algunos valores de estilo, o añadir otro nombre de la clase:

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

    (Yo no lo prueba este código, y no comprobar si realmente hay un segundo div presente, pero algo como esto debería funcionar.)

    Pero si estás generando el código html serverside que bien podría añadir un extra de clase en el segundo…

    • +Stein: resulta nth-of-type no hacer lo que piensa. La nueva respuesta, al igual que mi respuesta anterior, es incorrecto. Ver editado mi respuesta a continuación para obtener más detalles.
    • Esta pseudo-clase de trabajo perfecto para mi caso de uso. Gracias Mancha G. para la respuesta y para la actualización.
  2. 37

    Selectores pueden ser combinados:

    .bar:nth-child(2)

    significa «cosa que ha de clase bar» que es también el 2º niño.

    • Sólo para dejar claro a los demás, esto no va a funcionar porque no es el 2º hijo, es sólo el 2º elemento que coincide con la .bar selector. Así que en este caso .bar:nth-child(2) would actually select the 1st div.la barra de elemento, ya que es de clase «bar» y el 2º hijo de su padre.
    • Uso nth:child para seleccionar elementos de la mismo padre.
    • Nth-child se refiere a cada elemento presente en el dom de html. Al igual que este <div class=»foo»>1</div><h1>2</h1><p>3</p><div class=»foo»>4></div>. Si usted elige nth-child(2) a continuación, el título de la etiqueta <h1> será elegido no el de 4 elementos. Usted puede utilizar nth-of-type para resolver este problema. Por ejemplo : .foo:nth-of-type(2). La respuesta es completamente equivocado
  3. 19

    Mi respuesta original con respecto a :nth-of-type es simplemente incorrecto. Gracias a Pablo por señalar esto.

    La palabra «tipo» no sólo se refiere al «tipo de elemento» (como div). Resulta que los selectores div.bar:nth-of-type(2) y div:nth-of-type(2).bar significan la misma cosa. Ambos seleccionar los elementos que [a] es la segunda div de sus padres, y [b] clase bar.

    Por lo que la única puro CSS solución a la izquierda, que yo sepa, si desea seleccionar todos los elementos de un determinado selector excepto el primero, es el general selector de hermanos:

    .bar ~ .bar

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


    Original de mi (mal) responder de la siguiente manera:

    Con la llegada de CSS3, no hay otra opción. Es posible que no haya estado disponible cuando la pregunta se pidió por primera vez:

    .bar:nth-of-type(2)

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

    De esta forma se selecciona el segundo elemento que satisface la .bar selector.

    Si quieres la segunda y última de un tipo específico de elemento (o de todos ellos a excepción de la primera), el general selector de hermanos también el trabajo fino:

    .bar ~ .bar

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

    Es más corta. Pero, por supuesto, no queremos duplicar código, derecho? 🙂

    • Esto sería genial si fue apoyado 🙂
    • Los selectores de CSS3 trabajo en todos los navegadores más populares ahora. ¿Qué tipo de apoyo que están buscando?
    • nth-of-type solo funciona en los elementos, no las clases. usted puede verificar esto en el w3 enlaces de arriba.
    • Hm. Estás en lo correcto. Yo no puedo creer que no haya prueba de que antes he publicado en 2012. (O hizo el cambio de la especificación desde entonces?)
    • funciona perfectamente! si usted está usando interior bootbox, que sería la solución perfecta para la segunda bootbox del modal-telón de fondo de índice z de la propiedad.
    • Seguramente el general selector de hermanos sólo funcionará si los elementos son hermanos unos de otros. ¿Y si el 2 de una clase a otra parte en el documento? Supongo que esto no es posible, ¿verdad?

  4. 11

    ¿Qué es exactamente la estructura del HTML?

    La anterior CSS funcionará si el HTML es como tal:

    CSS

    .foo:nth-child(2)

    HTML

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

    Pero si tienes el siguiente código HTML no va a funcionar.

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

    Simples palabras, no hay selector para obtener el índice de los partidos del resto del selector de antes.

    • Si yo no puedo hacerlo por el índice, hay una manera de conseguir el último elemento en un grupo combinado? Ya que hay sólo 2 en este caso, sé que el 2do es también el último.
  5. 7

    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;}

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

    • sólo trabajando solución que he encontrado. gracias
  6. 6

    Y para las personas que están buscando un jQuery compatible respuesta:

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

    HTML:

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

    Hay una razón que usted no puede hacer esto a través de Javascript? Mi consejo sería el destino de los selectores con una regla universal (.foo) y, a continuación, analizar de nuevo a conseguir el último de foo con Javascript y conjunto adicional de estilo que usted necesita.

    O como sugerido por Stein, sólo tiene que añadir dos clases si usted puede:

    <div class="foo"></div>
    <div class="foo last"></div>
    
    .foo {}
    .foo.last {}
  8. 0
    .parent_class div:first-child + div

    Acabo de utilizar el de arriba para encontrar el segundo div por el encadenamiento de primer niño con el + selector.

    • Que sólo funciona si los dos divs son directo los hermanos. Ver mi respuesta para una solución más general. Por supuesto, su respuesta tiene la ventaja de trabajar dentro de CSS2.

Dejar respuesta

Please enter your comment!
Please enter your name here