A menos que no se supone que pero me parece que no puede conseguir nth-child reconocer el selector de clase.nth-child no responde al selector de clase

tengo dicen 4 divs dentro de otro div, todas las diversas clases y las identificaciones. Necesito seleccionar la primera instancia de un div con dicha clase. Por ejemplo:

#content .foo:nth-child(1) { margin-top: 0; }

Y, obviamente, de nuevo con first-child para obtener el mismo efecto, pero no afecta a ninguno de los divs.

Ahora si quiero forzarlo a trabajar con ese div Puedo hacer esto:

#content .foo:nth-child(3) { margin-top: 0; }

Lo que pasa es que es la tercera div en #content, que no tiene sentido, ya que necesito para obtener la primera instancia de cualquier cosa con esa clase.

<div id="content"> 
    <div id="action-bar"> </div> 
    <div id="message"> </div> 
    <div class="table"> </div> 
    <div class="clear"> </div> 
</div>

He aquí una muestra del HTML, lo he intentado nth-of-type así como esto:

#content .table:nth-of-type(1) { margin: 0 }

Una vez más, sólo responde cuando digo nth-of-type(3).

EDIT:

He creado un ejemplo de trabajo del problema que estoy teniendo aquí: http://jsfiddle.net/aHwS8/

Fuente

2010-07-08 stuartc

Tal vez debería mostrar las partes correspondientes de su documento HTML real. – Gumbo

@gumbo cosa segura, acabo editado .. :) Pero – stuartc

(al menos en este ejemplo) que tienen un solo elemento con la clase * * mesa. – Gumbo

Pruebe los :nth-of-type() pseudo-selector su lugar:

#content .foo:nth-of-type(1) { margin-top: 0; }

en cuenta que los recuentos de los elementos :nth-of-type() con el mismo nombre Así .foo:nth-of-type(1) no seleccionará el primer elemento con la clase foo pero cualquier primer elemento que es el primero en la lista de elementos agrupados por el mismo nombre. Si usted tiene algún documento como este:

<div> 
    <i class="foo">1</i><i>x</i><i class="foo">2</i> 
    <b class="foo">3</b><b>x</b><b class="foo">4</b> 
</div>

.foo:nth-of-type(1) seleccionará los elementos <i class="foo">1</i> y <b class="foo">3</b> ya que ambos son el primero de su propio tipo.

Fuente

2010-07-08 12:07:26 Gumbo

¡Gracias! Intenté obtener la misma respuesta, respondió a: #content .foo: nth-of-type (3) {margin-top: 0; } – stuartc

Es similar, es como ignorar la clase .foo y simplemente seleccionar los divs – stuartc

@stuartc: no ignora la clase. '.foo: nth-of-type (3)' solo se aplica a aquellos elementos que tienen la clase "foo" * y * son el tercero de su tipo (solo hay otros 2 hermanos con el mismo nombre de elemento antes de este elemento) – Gumbo

creo que está utilizando el selector equivocado, tratar:

#content .foo:first-of-type { margin-top: 0; }

Fuente

2010-07-08 12:13:19 Jake

¡Gracias! Intenté obtener la misma respuesta, respondió a: #content .foo: nth-of-type (3) {margin-top: 0; } – stuartc

Hmm, ya veo, así que lo que quieres es el primer 'div' con la clase' .foo' sin importar de qué hijo se trate. Pero lo que hace este selector es el primer 'div' si también tiene la clase' .foo'? Desde un google rápido y mira los pseudo-selectores de CSS3 no estoy seguro de que esto sea posible. Lo siento, no podría ser más ayuda! – Jake

Gracias por su ayuda, a pesar de no solucionar mi problema, ¡he aprendido mucho sobre los pseudo selectores! :) ¡gracias de nuevo! – stuartc

Esta es una entrada antigua, pero terminé aquí en busca de una respuesta para un problema similar. Quizás esto ayudará a alguien.

que tenía la siguiente estructura, con ganas de seleccionar el enésimo "foo" -div:

<body> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
    <div class='container'> 
    <div class='foo'></div> 
    </div> 
</body>

El truco era "volver" y seleccione el elemento padre con hermanos repetidas, en este caso .container y luego seleccione su hijo (a):

.container:nth-of-type(3) .foo { 
    styles here 
}

Fuente

2014-05-12 11:19:21 fhollste

nth-child no responde al selector de clase

EDIT:

Respuesta

Cuestiones relacionadas