Skip to content

Instantly share code, notes, and snippets.

@antoniocachuan

antoniocachuan/Pseudo-Classes-–-:nth-child.markdown

Created December 4, 2013 04:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save antoniocachuan/7782253 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save antoniocachuan/7782253 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Antonio.
Raw
index.html
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
<li>List item 8</li>
<li>List item 9</li>
<li>List item 10</li>
</ul>
Raw
Pseudo-Classes-–-:nth-child.markdown

Pseudo-Classes – :nth-child

how to use the :nth-child pseudo-class to target elements in between the first and last child elements.

A Pen by Antonio on CodePen.

License.

Raw
style.css
li:nth-child(-n+5) {
color: white;
background-color: black;
}
/*selecciona numeros pares*/
/*Expresiones de lenguajes
Seleccionara primero el tercero luego el quinto, septimo, es decir el 2n es el que le suma 2 en una secuencia
-n+5 selecciona el quinto y luego va bajando uno a uno es decir 4,3,2,1
*/
/*li:nth-child(2n+3) {
color: white;
background-color: black;
}*/
/*li:nth-child(3n+4) {
color: white;
background-color: black;
}*/
/*li:nth-child(-n+3) {
color: white;
background-color: black;
}*/
/*solo voltea la lista comienza desde el fina y retrocede uno a uno
li:nth-last-child(-n+3) {
color: white;
background-color: black;
}*/
@antoniocachuan
Copy link
Author

antoniocachuan commented Dec 4, 2013

Selectors- Expresiones de lenguajes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment