CSS sélectionner tous les éléments enfant sauf les deux premiers et les deux derniers
je suis très curieux (c'est tout) de voir comment vous choisiriez tous les enfants d'un élément sauf les deux premiers et les deux derniers.
j'ai une méthode, mais c'est méchant et illisible. Il doit y avoir une méthode beaucoup plus claire qui n'a pas besoin de 8 pseudo-sélecteurs.
:not(:nth-child(1)):not(:nth-child(2)):not(:nth-last-child(1)):not(:nth-last-child(2)) {
background: purple;
}
Oui, c'est assez horrible. Il sélectionne littéralement tous les éléments qui sont :pas le premier ou le deuxième Premier ou le dernier. Il doit y avoir une méthode qui utilise <!-Comme une demi-variable, au lieu de empilage de pseudo-sélecteurs.
j'ai pensé à un autre (toujours en désordre):
:not(:nth-child(-1n+2)):not(:nth-last-child(-1n+2)) {
background: purple;
}
3 réponses
je ne vois pas d'autre option que d'utiliser :nth-child et :not(:nth-last-child).
ma version:hr:nth-child(n+3):not(:nth-last-child(-n+2))
Selon :nth-child référence:
:nth-childla pseudo-classe CSS correspond à un élément qui aan+b-1fratries avant lui dans l'arborescence des documents, pour une valeur positive ou zéro donnée pour n, et a un élément parent.En d'autres termes, cette classe correspond à tous les enfants dont l'indice de chute dans l'ensemble
{ an + b; ∀n ∈ N }.
nth-child(n+3) correspond à tous les éléments, à partir de la troisième.
:nth-last-child fonctionne similaire, mais de la fin de la collection d'éléments, donc :nth-last-child(-n+3) correspond à seulement 2 éléments à partir de la fin de la collecte. En raison de :not ces 2 éléments sont exclus du sélecteur.
Vous pouvez simplement mettre votre violet à tous les éléments, puis l'enlever des 3 éléments indésirables:
element { background: purple }
element:first-child, element:nth-child(2), element:last-child, element:nth-last-child(2) {
background: none; /* or whatever you want as background for those */
}
Thats imho beaucoup plus facile à lire