web-dev-qa-db-fra.com

sélectionner les 3 derniers enfants

Je sais que vous pouvez sélectionner le dernier refroidissement avec :last-child. Maintenant, je dois sélectionner les 3 derniers enfants. Le seul problème est que le nombre d'enfants n'est pas connu, donc je ne peux pas utiliser :nth-child, je sais qu'il y a quelque chose qui s'appelle :nth-last-child mais je ne comprends pas vraiment comment c'est travail

<div id="something">

    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <!-- here some more

    and than i need to select these -->
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>

</div>

alors maintenant, j'ai besoin de quelque chose comme ça:

#something a:last-child{
   /* only now it needs to select 2 more a's that are before this child */ 
}
csscss-selectors
28
Ivo

Vous pouvez lire plus ici à propos du dernier enfant, mais cela devrait faire l’essentiel en sélectionnant les 3 derniers enfants uniquement avec CSS. 

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

violon démonstration de Fabrício Matté

Cela ne sélectionnera que les lignes renvoyant un nombre positif pour l'expression N (-n + 3), et comme nous utilisons nth-last-child, le décompte commence par la dernière, Les premières lignes du bas donnent:

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

tout le reste retournera un nombre négatif

81
Bassam Mehanni

Ceci est possible avec les sélecteurs CSS3 et les formules :

.something a:nth-last-child(-n+3) { ... }

Vous pouvez également essayer en utilisant jQuery (exemple) ou en ajoutant une classe spécifique aux trois derniers éléments de votre code côté serveur (JavaScript ne doit pas être activé dans les navigateurs et fonctionne également avec les navigateurs plus anciens CSS3).

5
praseodym

La réponse acceptée a la bonne formule, mais l'explication est fausse. 

Donc, le code CSS correct est (identique à la réponse acceptée):

#something a:nth-last-child(-n+3) {
    /*declarations*/
}

Mais voici l'explication correcte du calcul:

f(n) = -n+3
f(0) = -0+3 = 3 <- 3rd row from the bottom
f(1) = -1+3 = 2 <- 2nd row from the bottom
f(2) = -2+3 = 1 <- 1st row from the bottom
f(3) = -3+3 = 0 <- nothing
f(3) = -4+3 = -1 <- nothing
etc...
0
Richard Buff