Guía definitiva para entender las pseudo clases de CSS - Parte 2

Seguimos con la guía definitiva de las pseudo-clases. Si quieres echar un vistazo a la primera parte, visita este artículo. Como te veníamos contando, hay muchos tipos de pseudo-clases, en el anterior artículo os explicamos las pseudo-clases dinámicas y las basadas en el estado. A continuación seguimos con dichas clases.

Pseudo-clases basadas en la estructura

Las pseudo-clases basadas en la estructura clasifican a los elementos en función de su posición en la estructura del documento. Los ejemplos más comunes son :first_child, :last_child y nth-child(n). Todas estas pseudo-clases pueden utilizarse para referenciar a un elemento hijo específico dentro de un contenedor basándose en su posición.

Otras pseudo-clases

Existen otro tipo de pseudo-clases las cuales son más difíciles de clasificar, como:

  • :not(x), que selecciona elemento que no coinciden con el selector x
  • :lang(lenguaje de programación), que selecciona elementos cuyo contenido está en un lenguaje de programación específico
  • :dir(dirección), que selecciona elementos cuyo contenido se muestra en una dirección en concreto (izquierda-derecha o derecha-izquierda)
p:lang(ko){
  background-color: #FFFF00;
}
:root{
  background-color: #FAEBD7;
}

nth-child VS nth-of-type

Una de las cosas más difíciles de entender sobre las pseudo-clases es la diferencia entre :nth-child y :nth-of_type.

Ambas son pseudo-clases basadas en la estructura, y referencian a un elemento específico dentro de un elemento padre (contenedor), pero de una manera distinta.

Supongamos que n es 2, entonces :nth-child(n) referenciará a un elemento que es el segundo hijo de su elemento padre, y :nth-of_type(n) referenciará al segundo dentro del mismo tipo de elementos (por ejemplo, párrafos) dentro de un elemento padre.

Vamos a echar un vistazo a un ejemplo.

/* a paragraph that's also the second child inside its parent element */
  p:nth-child(2) {
  color: #1E90FF;    // lightblue
}
/* the second paragraph inside a parent element */
p:nth-of-type(2) {
  font-weight:bold;
}

Vamos a ver cómo este snippet de CSS afecta a un HTML en dos casos distintos.

Caso 1

En el Caso 1, el segundo elemento dentro del div es una lista, por lo tanto, el la regla de nth-child(2) no se aplicará. Aunque es un segundo hijo, no es un párrafo.

Pero si el elemento padre tiene un segundo párrafo, la regla nth-of-type(2) se aplicará, ya que esta regla sólo buscará los elementos párrafo y no se preocupará por otros tipos de elementos (como listas) en el interior del elemento padre.

En nuestro ejemplo, la regla nth-of-type(2) personalizará el segundo párrafo, el cual es el tercer hijo.

<div>
  <p>Paragraph 1, Child 1</p>
  <ul>Unordered List 1, Child 2</ul>
  <p>Paragraph 2, Child 3</p>
</div>

Caso 2

En este segundo caso, movemos la lista a la tercera posición, y el segundo párrafo lo ponemos antes de la lista. Esto significa que ambas reglas, la :nth-child(2) y la :nth-of-type(2) se aplicarán, ya que el segundo párrafo es también el segundo hijo de su padre, el elemento div.

<div>
  <p>Paragraph 1, Child 1</p>
  <p>Paragraph 2, Child 2</p>
  <ul>Unordered List 1, Child 3</ul>
</div>

Pseudo-clases VS pseudo-elementos

Cuando hablamos de pseudo-clases, también es importante entender cómo difieren de los pseudo-elementos, para no confundirnos.

Pseudo-elementos, tales como ::before y ::after son añadidos también por los UA, y pueden ser contemplados y personalizados con CSS, al igual que las pseudo-clases.

Pero mientras que utilizamos las pseudo-clases para seleccionar elementos HTML que existen en la estructura del documento, los pseudo-elementos permiten hacer referencia a los elementos que normalmente no existen en el DOM, ya sea en su totalidad (por ejemplo ::before y ::after) o sólo ciertas partes de los elementos existentes (por ejemplo ::first-letter o ::placeholder).

También son diferentes en la sintaxis. Los pseudo-elementos se identifican generalmente con dos puntos dobles ::, mientras que las pseudo-clases se identifican con dos puntos nada más :.

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.