CSS :nth-child(), Le sélecteur par position
Publié le :
Introduction
Voici la suite de l’article sur les possibilités avec le :has(), pour voir la première partie, vous pouvez cliquer le lien de la partie 1 de l’article
Ciblage par index
En CSS, il existe un sélecteur qui permet de cibler un enfant en fonction de son index, autrement dit selon sa position en tant qu’enfant. Par exemple, si je souhaite cibler le troisième enfant, on peut faire un simple :
span:nth-child(3) {}
🕳
🕳
🎯
🕳
🕳
<div>
<span>🕳</span>
<span>🕳</span>
<span>🎯</span>
<span>🕳</span>
<span>🕳</span>
</div>div {
padding: 2rem clamp(1rem, 4vw, 4rem);
font-size: clamp(2rem, 4vw, 4rem);
border-radius: 20px;
display: flex;
place-content: space-between;
}
span {
--color-shadow:360deg;
text-shadow: 0 0 25px hsla(var(--color-shadow), 100%, 50%, 100%);
&:nth-child(3) {
--color-shadow:150deg;
}
}Ciblage à partir d’un index
On peut également cibler tous les éléments à partir d’un index :
span:nth-child(n + 3) {}
🚀
🚀
🚀
🚀
🚀
🚀
<div>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
</div>div {
padding: 2rem clamp(1rem, 4vw, 4rem);
font-size: clamp(2rem, 4vw, 4rem);
border-radius: 20px;
display: flex;
place-content: space-between;
font-family: sans-serif;
}
span {
--filter: 1;
filter: grayscale(var(--filter));
&:nth-child(n + 3) {
--filter: 0;
}
}Ou en partant de la fin :
span:nth-last-child(n + 3) {}
🚀
🚀
🚀
🚀
🚀
🚀
<div>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
</div>div {
padding: 2rem clamp(1rem, 4vw, 4rem);
font-size: clamp(2rem, 4vw, 4rem);
border-radius: 20px;
display: flex;
place-content: space-between;
font-family: sans-serif;
}
span {
--filter: 1;
filter: grayscale(var(--filter));
&:nth-last-child(n + 3) {
--filter: 0;
}
}