Sauf si cela n'est pas supposé le faire, mais je n'arrive pas à obtenir nth-child pour accuser réception du sélecteur de classe.nth-child ne répond pas au sélecteur de classe

J'ai dit 4 divs à l'intérieur d'un autre div, toutes les différentes classes et ID. Je dois sélectionner la première instance d'un div avec ladite classe. Par exemple:

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

Et, évidemment, encore une fois avec first-child pour obtenir le même effet, mais il ne porte pas atteinte des divs.

Maintenant, si je veux le forcer à travailler avec ce div Je peux le faire:

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

Il se trouve que c'est le 3e div dans #content, ce qui est inutile parce que je dois obtenir la 1ère instance de n'importe quoi avec cette classe.

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

Voici un échantillon du HTML, je l'ai essayé nth-of-type aussi bien comme ceci:

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

Encore une fois, il répond que quand je dis nth-of-type(3).

EDIT:

J'ai mis en place un exemple de travail du problème que je vais avoir ici: http://jsfiddle.net/aHwS8/

Source

2010-07-08 stuartc

Peut-être que vous devriez nous montrer les parties correspondantes de votre document HTML réel. – Gumbo

@gumbo chose sûre, je viens de l'éditer .. :) – stuartc

Mais (au moins dans cet exemple), vous avez juste un élément avec la classe * table *. – Gumbo

Essayez les :nth-of-type() pseudo-selector au lieu:

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

Notez que :nth-of-type() compte les éléments avec le même nom. Donc .foo:nth-of-type(1) ne sélectionnera pas le premier élément avec la classe foo mais tout premier élément qui est le premier dans la liste des éléments regroupés par le même nom. Si vous avez un document comme celui-ci:

<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) sélectionnera les éléments <i class="foo">1</i> et <b class="foo">3</b> que les deux sont la première de son propre type.

Source

2010-07-08 12:07:26 Gumbo

Merci! J'ai essayé obtenu la même réponse, il a répondu à: #content .foo: nth-of-type (3) {margin-top: 0; } – stuartc

C'est un peu similaire, c'est comme ignorer la classe .foo et simplement sélectionner les divs – stuartc

@stuartc: Cela n'ignore pas la classe. '.foo: nth-of-type (3)' ne s'applique qu'aux éléments qui ont la classe "foo" * et * sont au tiers de son type (il n'y a que deux autres frères ayant le même nom d'élément avant cet élément). – Gumbo

Je pense que vous utilisez le mauvais sélecteur, essayez:

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

Source

2010-07-08 12:13:19 Jake

Merci! J'ai essayé obtenu la même réponse, il a répondu à: #content .foo: nth-of-type (3) {margin-top: 0; } – stuartc

Hmm, je vois - donc ce que vous voulez c'est le premier 'div' avec la classe' .foo' quel que soit l'enfant. Mais ce que fait ce sélecteur est le premier 'div' s'il a aussi la classe' .foo'? D'un rapide google et regarder les Pseudo-Selectors CSS3 je ne suis pas sûr que ce soit possible. Désolé je ne pourrais pas être plus d'aide! – Jake

Merci pour votre aide, même si je n'ai pas résolu mon problème, j'ai beaucoup appris sur les pseudo-sélecteurs! :) Merci encore! – stuartc

C'est un ancien poste mais je fini ici à la recherche d'une réponse pour le même problème. Peut-être que cela aidera quelqu'un.

J'ai eu la structure suivante, voulant sélectionner le n-ième « 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>

L'astuce était « revenir en arrière » et sélectionnez l'élément parent avec frères et sœurs répétées, dans ce cas .container puis sélectionnez son enfant (s):

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

Source

2014-05-12 11:19:21 fhollste

nth-child ne répond pas au sélecteur de classe

EDIT:

Répondre

Questions connexes