CSS Selectors: nth-child

Sintaxis

li:nth-child(an+b) { };
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
</ul>
/* Al ser cada un elemento, no necesitamos indicarle un número antes de la letra 'n'. Con lo cual esto se lee: selecciona a partir del elemento 3, uno a uno. */li:nth-child(n+3) {
background-color: green;
}
/* Selecciona a partir del elemento 3, cada 2 */li:nth-child(2n+3) {
background-color: green;
}
/* Selecciona a partir del 3, hacia atrás */li:nth-child(-n+3) {
background-color: green;
}
/* Selecciona a partir del 3, hacia atrás cada 2 elementos */li:nth-child(-2n+3) {
background-color: green;
}

Compatibilidad con navegadores

--

--

UI Developer | alejandronarvaja.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store