web-dev-qa-db-fra.com

nième enfant ne répond pas au sélecteur de classe

À moins que ce ne soit pas censé le faire, mais je n'arrive pas à obtenir nth-child pour reconnaître le sélecteur de classe.

J'ai dit 4 divs dans un autre div, tous de différentes classes et identifiants. 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 avec first-child pour obtenir le même effet, mais cela n'affecte aucun des divs.

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

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

Il se trouve que c’est la troisième division de #content, ce qui est inutile car je dois obtenir la première instance de quoi que ce soit 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 exemple du code HTML. J'ai aussi essayé nth-of-type comme ceci:

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

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

MODIFIER:

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

csscss-selectors
31
stuartc

Essayez le pseudo-sélecteur :nth-of-type() à la place:

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

Notez que :nth-of-type() compte les éléments du même nom. Donc, .foo:nth-of-type(1) ne sélectionnera pas le premier élément de la classe foo, mais tout premier élément constituant le premier élément de la liste des éléments regroupés sous 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> car ils sont tous deux les premiers de son type.

37
Gumbo

Ceci est un vieux post mais je me suis retrouvé ici à chercher une réponse à un problème similaire. Cela aidera peut-être quelqu'un.

J'avais la structure suivante, voulant sélectionner la n-è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 consistait à "revenir en arrière" et sélectionner l'élément parent avec frères et sœurs répétés , dans ce cas .container, puis sélectionner son ou ses enfants:

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

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

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