:nth-child(n + 3) et :nth-last-child(n + 3)
:nth-child(n + 3) et :nth-last-child(n + 3)
HTML
index.html <article>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
</article>
<article>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
<span>🚀</span>
</article>
CSS
style.css @layer demo {
span {
--filter: 1;
filter: grayscale(var(--filter));
}
article:nth-child(1) {
span {
&:nth-child(n + 3) {
--filter: 0;
}
}
}
article:nth-child(2) {
span:nth-last-child(n + 3) {
--filter: 0;
}
}
}
@layer demoStyles {
body {
height: 100svh;
}
article {
background-image: linear-gradient(180deg, black, #333);
padding: 2rem 4rem;
border-radius: 20px;
font-size: 4rem;
}
}