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