CSS3 como usar los selectores de las pseudo-classes :nth-child() :nth-of-type() y :not()

Hay una cosa que me ha quedado bien clara, donde puedas usar CSS3 no uses javascript! Hoy voy a explicar como podemos usar estos selectores de CSS3 para ayudarnos a seleccionar y aplicar estilos de una manera muy precisa a cualquier selector del documento HTML.

Un selector podría ser --> Elemento, atributo del selector, una clase, un id o una pseudo-clase.


:nth-child(n)

En este caso estamos seleccionando los hijos del elemento padre que coincidan con el valor que tendrá 'n'.

ol.nth li:nth-child(n) {  
   background-color: #cccccc;
}

Valores numéricos

Si 'n' toma el valor de un simple número, por ejemplo 1 o 5 lo que estamos haciendo es seleccionar los elementos de las posiciones 1 y 5.

ol.nth li:nth-child(1) , ol.nth li:nth-child(5)  {  
   background-color: #cccccc;
}

Alternando elementos

Para alternar elementos hay que usar las dos palabras que son permitidas como argumanto, 'odd (impar)' y 'even (par)'

ol.nth li:nth-child(odd) {  
   background-color: #cccccc;
}

ol.nth li:nth-child(even) {  
   background-color: #c5c5c5;
}  

Formulas numéricas

Ahora es cuando se complica la cosa, y si queremos acceder cada 2 elementos? Para esto tenemos la formula xn+y-->(3xn)+3. Hay que pensar como si fuese una iteración en programación,

x = cada cuantos elementos queremos contar;
y = por donde empezar a contar;
n = actúa como índice por cada elemento seleccionado, empieza por 0.

(3x0)+3 = 3 = 3º elemento; (3x1)+3 = 6 = 6º elemento; (3x2)+3 = 9 = 9º elemento; .....

así hasta que se acaben los elementos que coincidan con el selector que hemos especificado.

El ejemplo de arriba sería (3n+3):

ol.nth li:nth-child(3n+3) {  
   background-color: #cccccc;
}

Otro ejemplo--> (3n+5) --> En este caso contaríamos de 3 en 3 empezando por el 5 elemento.

ol.nth li:nth-child(3n+5) {  
   background-color: #cccccc;
}

También hay la posibilidad de omitir el parámetro 'y', quedaría de esta manera :nth-child(2n)

(2x0)=0= no hay; (2x1)=2= 2º elemento; (2x2)=4= 4º elemento; ......

Para terminar veremos que también podemos usar valores negativos '-n+5' seleccionaría los 5 primeros elementos:

ol.nth linth-child(-n+5) {  
   color: green;
}

También tendríamos E:nth-last-child(n) Igual que :nth-child pero empezando por el último elemento.


:nth-of-type(n)

En este caso lo que estamos seleccionando es el elemento que precede a :nth-of-type() y 'n' tiene las mismas funciones que en el caso de :nth-child(), valores numéricos, odd, even y formulas numéricas.

Veamos este ejemplo:

  
<section>  
  <p>Casa</p>
  <p>Perro</p>  <!-- Acceder a este elemento -->
</section>  
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

Los dos ejemplos de CSS hacen lo mismo pero no tienen el mismo significado,

con :nth-child --> significa que seleccionamos el elemento SI:

1- hay un elemento páragrafo
2- si es el segundo hijo del elemento padre

con :nth-of-type --> significa:

1- selecciona el segundo páragrafo hijo del padre

Pero que ocurre si añadimos más etiquetas a nuestro HTML:

  
<section>  
  <h2>Articulos</h2>
  <p>Casa</p>
  <p>Perro</p>  <!-- Acceder a este elemento -->
</section>  

Ahora p:nth-child(2) está seleccionando al primer 'p' porque es el segundo elemento hijo del padre que es la etiqueta 'section'.

p:nth-of-type(2) sigue funcionando ya que estamos accediendo al segundo elemento 'p'.


También existe E:nth-last-of-type(n) sería el mismo concepto pero empezando por el último elemento.

Otros selectores con 'type' serían:

E:first-of-type El primer elemento de ese tipo;
E:last-of-type El último elemento de ese tipo;
E:only-of-type El único elemento de ese tipo;


:not(x)

Con este selector escogeremos todos aquellos elementos que no coincidan con el elemento que usemos entre los paréntesis. Puede parecer complicado pero no lo es.

p:not(.classy) { color: red; }  
:not(p) { color: green; }
<p>Some text.</p>  
<p class="classy">Some other text.</p>  
<span>One more text<span>

Some text.


Some other text.


One more text.

Las posibilidades son infinitas--> input:not([type="submit"]),button:not([DISABLED])....


Otros Selectores

También hay otros selectores que nos puedan servir como podrían ser:

E:root Elemento raíz del documento;
E:first-child El primer hijo del elemento padre;
E:last-child El último hijo del elemento padre;
E:only-child El único hijo del elemento padre;

E:enabled or E:disabled Elemento de la interfaz de usuario que está habilitado o deshabilitado.

E:checked Elemento de la interfaz de usuario que está seleccionado (radio-button or checkbox)

E::first-line La primera línea formateada que compone el elemento; ejemplo:

p::first-line {color:red} Convertiría la primera línea del paragrafo en rojo.

<p>Esto sería en rojo

y esto de otro color </p>

E::first-letter La primera letra formateada del elemento; ejemplo:

p::first-line {font-size:50px} La primera letra del paragrafo en tamaño 50.

<p>Super size y regular tamaño </p>

E::before Genera contenido antes del elemento
E::after Genera contenido después del elemento

Ejemplo:

p::after {content:'Contenido a añadir';color:red}

Esto es todo, espero que os sirva de ayuda!!


Fuentes:
developerdrive.com
css-tricks.com/:nth-child
css-tricks.com/:nth-of-type

comments powered by Disqus