En CSS, est-il possible de sélectionner récursivement tout: last-child from body?
Étant donné ce balisage:
<body>
<div id="_1">
<div id="_2"></div>
</div>
<div id="_3">
<div id="_4">
<div id="_5"></div>
<div id="_6"></div>
</div>
</div>
</body>
Je cherche div no. 3, 4 et 6
Une autre façon de le dire est la suivante:
body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
/* My stuff here */
}
Mais évidemment, ce n'est pas une bonne approche.
Réponses:
6 pour la réponse № 1Non, malheureusement, c \ 'est à peu près la seule façon de le faire sans modifier le code HTML.
Il y a eu au moins une demande pour les versions récursives du :first-child et :last-child pseudo-classes, mais cela ne semble pas avoir gagné beaucoup de faveur. Remarquez qu'il suggère d'imbriquer et de répéter les pseudo-classes de la même manière que dans votre question:
Actuellement, autant que je sache, nous ne pouvons jumeler les enfants que jusqu'à un certain exact Niveau de nidification connu à l'avance (3 dans l'exemple ci-dessous):
.container > :first-child, .container > :first-child > :first-child, .container > :first-child > :first-child > :first-child {}Nous ne pouvons pas utiliser uniquement: le sélecteur de contexte du premier enfant, car cela sélectionnerait également les premiers enfants des blocs qui ne sont pas les premiers enfants eux-mêmes.
Nous avons donc besoin d'une sorte de récursif sélecteur qui correspond non seulement au premier et au dernier enfant, mais également à tous les éléments les plus récents et les plus récents, quel que soit leur niveau d'imbrication.
1 pour la réponse № 2
Pas besoin de chaîner tout le chemin. Ce serait simplement comme ça
div:last-child {
/* Your GREAT css */
}
Démo
Mettre à jour: Dans ce cas, donnez le div2 une classe typique et utilisation :not() pour sortir de la sélection
div:last-child:not(.nolist) {
border: 1px solid red;
}