Puis-je combiner :nth-child() ou :nth-of-type() avec l'arbitraire d'un sélecteur?

C'est un problème très commun qui se pose en raison d'une mauvaise compréhension de la façon dont :nth-child() et :nth-of-type() travail. Malheureusement, il n'existe actuellement pas de sélecteur de solution basée sur encore car les Sélecteurs ne fournit pas un moyen pour correspondre à la nième enfant qui correspond à l'arbitraire d'un sélecteur de fonction sur un motif tel que impaire, paire ou tout an+b où a != 1 et b != 0. Cela s'étend au-delà des sélecteurs de classe, à sélecteur d'attribut, des négations, et des combinaisons plus complexes de sélecteurs simples.

La :nth-child() pseudo-classe compte des éléments parmi tous de leurs frères et sœurs sous le même parent. Il ne compte pas seulement les frères et sœurs qui correspondent le reste de la sélection. De même, la :nth-of-type() pseudo-classe compte frères et sœurs partageant le même type d'élément, qui désigne le nom de la balise dans le code HTML, et pas le reste de la sélection.

Cela signifie également que si tous les enfants d'un même parent sont d'un même type d'élément, par exemple dans le cas d'un corps de table dont seuls les enfants sont tr éléments ou un élément de la liste dont seuls les enfants sont li éléments, puis :nth-child() et :nth-of-type() va se comporter à l'identique, c'est à dire pour chaque valeur de an+b, :nth-child(an+b) et :nth-of-type(an+b) trouvera le même ensemble d'éléments.

En fait, tous les sélecteurs simples dans un composé sélecteur, y compris les pseudo-classes telles que :nth-child() et :not(), travail indépendamment l'un de l'autre, plutôt que de regarder les sous-ensemble des éléments qui sont mis en correspondance par le reste de la sélection.

Cela implique également que il n'y a pas de notion d'ordre entre les simples sélecteurs à l'intérieur de chaque composé sélecteur de¹, ce qui signifie, par exemple, les deux sélecteurs sont équivalentes:

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

Traduit de l'anglais, les deux veulent dire:

Sélectionnez tout tr élément qui correspond à tous les indépendantes suivantes conditions:

• c'est un impair enfant de son parent;
• il a la classe "ligne"; et
• il est un descendant d'un table élément qui a la classe "maclasse".

^{(vous remarquerez mon utilisation d'une liste non ordonnée ici, juste pour enfoncer le clou)}

Car il n'existe actuellement pas de pure CSS solution, vous devrez utiliser un script pour filtrer les éléments et appliquer des styles supplémentaires ou des noms de classe en conséquence. Par exemple, ce qui suit est une commune de la solution à l'aide de jQuery (en supposant qu'il existe un seul groupe de lignes rempli avec tr éléments dans le tableau):

$('table.myClass').each(function() {
  //Note that, confusingly, jQuery's filter pseudos are 0-indexed
  //while CSS :nth-child() is 1-indexed
  $('tr.row:even').addClass('odd');
});

Avec le CSS correspondant:

table.myClass tr.row.odd {
  ...
}

Si vous utilisez des outils de test automatisés tels que le Sélénium ou le traitement de HTML avec des outils comme lxml, la plupart de ces outils permettent de XPath comme une alternative:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

D'autres solutions à l'aide de différentes technologies sont laissé comme exercice au lecteur; c'est juste un bref exemple artificiel à des fins d'illustration.

---

Pour ce que ça vaut, il y a une proposition pour une extension pour le :nth-child() de la notation à être ajouté à des Sélecteurs de niveau 4 pour les fins de la sélection de chaque nième enfant correspondant à un sélecteur de donnée.²

Le sélecteur de filtrage des matches est fourni comme argument pour :nth-child(), de nouveau en raison de la façon dont les sélecteurs de fonctionner indépendamment l'un de l'autre dans un ordre dicté par le sélecteur de syntaxe. Donc dans votre cas, il devrait ressembler à ceci:

table.myClass tr:nth-child(odd of .row)

(Un lecteur attentif remarquera tout de suite que ce devrait être :nth-child(odd of tr.row) au lieu de cela, depuis le simple sélecteurs tr et :nth-child() fonctionner indépendamment l'un de l'autre. C'est l'un des problèmes avec les pseudo-classes qui acceptent les sélecteurs, une boîte de pandore que je préfère ne pas l'ouvrir au milieu de cette réponse. Au lieu de cela, je vais aller avec l'hypothèse que la plupart des sites n'auront pas d'autres éléments que tr éléments comme les frères et sœurs de l'un à l'autre dans un corps de table, ce qui en ferait l'une des options fonctionnellement équivalent.)

Bien sûr, être une marque nouvelle proposition dans une toute nouvelle spécification, ce ne sera probablement pas voir la mise en œuvre jusqu'à quelques années en bas de la route. Dans le même temps, vous aurez à coller avec l'aide d'un script, comme ci-dessus.

---

¹ _{Si vous spécifiez un type ou d'un sélecteur universel, il doit venir en premier. Cela ne change pas la façon dont les sélecteurs fondamentalement, cependant; il n'est rien de plus qu'un syntaxiques caprice.}

² _{c'est Ce qui a été proposé à l'origine comme :nth-match(), cependant, parce qu'elle compte encore un élément par rapport à ses frères et sœurs, et pas à chaque autre élément qui correspond au sélecteur de donnée, il a, depuis, à partir de 2014 été redéfini comme une extension de l'existant :nth-child() à la place.}

OriginalL'auteur BoltClock

nth-of-type fonctionne en fonction de l'indice du même type de l'élément, mais nth-child fonctionne uniquement en fonction de l'indice de n'importe quel type de frères et sœurs éléments.

Par exemple

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>
<div class="rest">...</div>

Supposons que dans html ci-dessus que nous voulons cacher tous les éléments ayant reste de la classe.

Dans ce cas nth-child et nth-of-type fonctionnera exactement le même que tous les éléments sont du même type, c'est-à <div> donc css devrait être

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

OU

.rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){
    display:none;
}

Maintenant vous devez vous demander quelle est la différence entre nth-child et nth-of-type c'est donc la différence

Supposons que le html est

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>
<p class="rest">...</p>

Dans le html ci-dessus le type de .rest élément est différent des autres .rest sont des paragraphes et les autres sont des div dans ce cas, si vous utilisez nth-child vous avez à écrire comme cela

.rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){
    display:none;
}

mais si vous utilisez nth-of-type css peut être ce

.rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){
    display:none;
}

Type de .rest élément est <p> donc ici nth-of-type est de détecter le type de .rest et puis, il l'a appliqué css sur la 1ère, 2ème, 3ème, 4ème, 5ème élément de <p>.

OriginalL'auteur Gaurav Aggarwal