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

À moins qu'il n'est pas censé mais je n'arrive pas à obtenir nth-child de reconnaître le sélecteur de classe.

J'ai dis 4 divisions à l'intérieur d'une autre div, tous de différentes classes et les id. J'ai besoin de sélectionner le premier exemple de div avec la classe dit. Par exemple:

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

Et, évidemment, de nouveau avec first-child d'obtenir le même effet, mais il ne doit pas avoir d'incidence sur les divs.

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

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

Il se trouve que c'est la 3ème div dans #contenu, ce qui est inutile, parce que j'ai besoin d'obtenir la 1ère instance de rien 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 de l'HTML, j'ai essayé nth-of-type ainsi comme ceci:

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

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

EDIT:

J'ai mis en place un exemple de la le problème, je vais avoir ici: http://jsfiddle.net/aHwS8/

  • Vous devriez peut-être nous montrer les parties correspondantes de votre document HTML.
  • une chose est sûre, j'ai juste édité.. 🙂
  • Mais (au moins dans cet exemple), vous avez juste un élément avec la classe de la table.
  • oui, mais 'n' ne répond qu'à le nombre, c'est dans le div conteneur, pas ce nombre, il est dans la liste des .table. Je pense que ma compréhension de ces pseudo-sélecteurs est un peu hors. @Jake a décrit ce que j'essaie de faire parfaitement "o ce que vous voulez, c'est la première div avec la classe .foo indépendamment de qui l'enfant qu'il est. Mais ce que ce sélecteur n'est le premier div, s'il a de la classe .foo" Vas avoir à frapper google. Merci pour votre aide!
  • Oui, les deux :nth-of-type() et :nth-child() ne faire que de prendre le type d'élément ou d'être seulement un élément du tout en compte lors du comptage.
  • Je découvre que si c'est un div c'est pas le même résultat si c'est un span. Rendez-vous ici et changement de durée pour les div et il vous donnera un résultat différent, Il est juste dans Google Chrome? ne pas le tester."nth-of-type" jsfiddle.net/onigetoc/b3q1mgkh

InformationsquelleAutor stuartc | 2010-07-08
  1. 37

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

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

    Noter que :nth-of-type() compte les éléments avec le même nom. Donc .foo:nth-of-type(1) ne sélectionnez 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 sous le même nom. Si vous avez un document comme ceci:

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

    • Merci! J'ai essayé eu la même réponse, il a répondu: #contenu .toto:nth-of-type(3) { margin-top: 0; }
    • C'est une sorte de semblable, c'est comme il est ignorant la .classe foo et il vous suffit de sélectionner les divs
    • Il n'ignore pas la classe. .foo:nth-of-type(3) s'applique seulement à ceux des éléments qui ont la classe “toto” et sont le tiers de son type (il y a seulement 2 autres frères et sœurs avec le même nom de l'élément avant cet élément).
    • Dans un sens, il ignore la classe. Il semble chercher à l'élément de cette classe, et puis regarde toutes les autres de ce type quelle que soit leur classe. De sorte qu'il ne se servir de la classe d'abord de trouver l'élément, mais à partir de là, il ne semble pas à la matière, si les éléments de ce type ont la classe ou pas.
    • C'est vrai, il suffit de regarder cet exemple: jsfiddle.net/DK3zc C'est en ignorant le sélecteur par attribut.
    • pas le bon endroit pour demander,mais j'ai une question ici...je suis en train de travailler un exemple de nth-of-type semblable à celui que vous avez donné ici ..codepen.io/sahithiK/stylo/EgAVzG..mais ressemble nth-of-type est en considérant à la fois p et div comme le même,peut vous aider sur ce ,si je remplace le div avec la durée ,il est workign comme prévu..je pose la question ici,car j'ai une interdiction à mes questions s'il vous plaît aider..

    InformationsquelleAutor Gumbo
  2. 7

    C'est un vieux post mais je me suis retrouvé ici à la recherche d'une réponse pour un problème similaire. Peut-être que cela aidera quelqu'un.

    J'avais la structure suivante, en 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 de "revenir en arrière" et sélectionnez l'élément parent avec répété frères et sœurs, dans ce cas .conteneur et sélectionnez ensuite ses enfant(s):

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

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

    #content .foo:first-of-type { margin-top: 0; }
    • Merci! J'ai essayé eu la même réponse, il a répondu: #contenu .toto:nth-of-type(3) { margin-top: 0; }
    • Hmm, je vois tellement ce que vous voulez, c'est la première div avec classe .foo indépendamment de qui l'enfant qu'il est. Mais ce que ce sélecteur n'est la première div si elle aussi a de la classe .foo? À partir d'un rapide google et regardez le CSS3 Pseudo-Sélecteurs je ne suis pas sûr que cela est possible. Désolé je ne pouvais pas être plus d'aide!
    • Merci pour votre aide, en dépit de ne pas fixer mon problème, j'ai appris beaucoup de choses sur la pseudo-sélecteurs! 🙂 merci encore!
    InformationsquelleAutor Jake