PseudoClases CSS

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. De esta forma, el CSS definido en la pseudoclase del elemento solamente se aplicará al elemento cuando se encuentre en ese estado, y dejará de aplicarse cuando el elemento salga del estado.

La pseudoclase más habitual y utilizada en CSS es la que selecciona el elemento cuando situamos el ratón encima del elemento. Esta clase se define con la palabra hover, y aunque se puede definir sobre cualquier elemento HTML, se suele usar sobre las etiquetas <a> para definir un formato alternativo de los enlaces cuando el usuario coloque el ratón sobre ellos.

Las pseudoclases son una primera forma de introducir dinamismo en el documento, puesto que es un formato alternativo para un elemento, que se aplicará cuando el elemento cambie de estado, y ese cambio suele responder a una interacción del usuario (pasar el ratón por encima, seleccionar un elemento, rellenar un campo de formulario...). Además es un dinamismo sencillo, puesto que se define unicamente con CSS, sin necesidad de recurrir a javascript. Este tipo de acciones de usuario son llamadas eventos. Los eventos son acciones que reconoce el navegador y que sirven para desencadenar otras acciones. El evento mouseover es de los más utilizados, pero hay muchos más. Unos son realizados por el propio usuario, como hacer clic, pasar el ratón por encima de algo, quitar el ratón de encima de algo, rellenar un dato, etc. Y otros son realizados por el navegador, como al terminar de cargar la página, al recargar la página actual, al salir de la página, al recibir un dato, etc.

Además de las pseudoclases dinámicas (las que reaccionan a eventos) también tenemos pseudoclases estáticas, que seleccionan siempre a un elemento por su estado o posición dentro del documento HTML, sin necesidad de que sean definidos por un evento. Es el caso de las pseudoclases que permiten seleccionar el primer elemento de un tipo, o el último, o el elemento anidado número x de un determinado parent (contenedor). Más adelante trabajaremos con más detalle con este tipo de pseudoclases.

Forma de definir una pseudoclase

Para definir una pseudoclase tenemos que añadir la palabra clave asignada a la pseudoclase a continuación del selector CSS que queremos modificar. Usamos los dos puntos (:) para separar el selector de la pseudoclase. Y a continuación definimos sus propiedades CSS dentro de unas llaves ({}) y separadas por punto y coma (;) como hacemos para cualquier otro selector.

Por ejemplo, para definir un CSS específico para todas las etiquetas <a> cuando pasamos el ratón sobre ellas escribiremos: a:hover {...}. Es necesario que el selector, los dos puntos y la pseudoclase se escriban sin espacios entre ellos, de lo contrario no funcionará el selector.

Ejemplo para etiquetas <a>

Para conseguir que todos los enlaces se muestren directamente en el documento sin el subrayado y de color granate, y que cuando pasamos el ratón sobre ellos cambien a color azul y subrayado haremos esto:

		 a {
		 	text-decoration: none;
		 	color: maroon; 
		 }
		 
		 a:hover {
		 	text-decoration: underline;
		 	color: blue;
		 }
		

Y veremos

Ejemplo para trabajar con clases

Aunque el ejemplo anterior es perfectamente válido, en la práctica resulta poco útil, porque nunca vamos a querer modificar exactamente igual todos los enlaces de un mismo sitio. Lo normal será que modifiquemos cada grupo de enlaces de una manera distinta según su posición en la estructura del documento (los de la navegación con un mismo formato, los del footer con otro diferente, igual para los de texto, etc.)

En estos casos resulta más útil trabajar con clases en lugar de cambiar toda la etiqueta. La forma de hacerlo es así:

<nav>
<ul>
	<li class="menu"><a href="#" class="enlace">Enlace 1</a></li>
	<li class="menu"><a href="#" class="enlace">Enlace 2</a></li>
	<li class="menu"><a href="#" class="enlace">Enlace 3</a></li>
	<li class="menu"><a href="#" class="enlace">Enlace 4</a></li>
	<li class="menu"><a href="#" class="enlace">Enlace 5</a></li>
</ul>
</nav>
		
Y el CSS
	 .menu {
	 	display: inline-block;
	 	width: 20%; 	
	 	list-style: none;
	 	text-align: center;
	 	margin-left: -4px;
	 	background-color: darkgray;
	 }
	 .enlace {
	 	color: lemonchiffon;
	 	border-top:3px solid darkgray;
	 	border-bottom:  3px solid darkgray;
	 	display: block; 
	 }
	 .enlace:hover {
		letter-spacing: 4px;
		font-weight: bold;
		color: lemonchiffon;
		text-decoration: none;
		border-top: 3px solid;
		border-bottom: 3px solid;
		background-color: darkgoldenrod;
	}
		

Obteniendo este resultado

Aplicar la pseudoclase hover a otros elementos

El modo hover no está restringido únicamente a los enlaces del documento, realmente se puede aplicar a cualquier etiqueta HTML que represente algo en el documento (que no esté vacía), con lo que su uso nos permite dar dinamismo a prácticamente cualquier elemento del DOM. Su aplicación no requiere de nada en especial, sólo seguir las mismas pautas que en el caso que hemos visto para la etiqueta <a>

Ejemplo sobre elemento <span>

Un uso muy habitual de esta pseudoclase es para generar elementos en el documento que visualmente parezcan botones, al estilo de los campos input o button de los formularios, pero que en realidad pueden ser cualquier etiqueta HTML. Un caso es el uso de span con este fin:

<p>
Párrafo que contiene  un <span class="btn">botón</span>. Aunque realmente no es un elemento de formulario. Pero mediante CSS y javascript podemos hacer que se comporte como tal.
</p>
Y el CSS
.btn {
 	border:1px solid black;
 	background-color: darkgray;
 	padding: 2px 10px;
 	color: lemonchiffon;
 }
 .btn:hover {
 	color: darkgray;
 	background-color: lemonchiffon;
 	cursor: pointer;
 }
	

Resultando

Otros tipos de pseudoclases

Tenemos un gran número de pseudoclases en CSS. Pero si nos centramos en elementos <a> encontramos los siguientes:

• a:link Modifica la presentación de los links. Es decir, de los elementos a que tengan atributo href
• a:visited Modifica la presentación de los enlaces ya visitados por el navegador
• a:active Modifica la presentación de los enlaces mientras están activos, esto es cuando hacemos clic y hasta que soltamos el ratón

Nota: Si usamos estas pseudoclases junto a la pseudoclase hover debemos definir la clase hover después de las otras en el CSS, de lo contrario las otras sobreescriben a hover y no se aprecia su efecto.

Ejemplo

Usando la deficición para los enlaces con :link en lugar de modificar directamente la etiqueta a podemos hacer que un elemento <a name="ancla">aquí</a> no reciba el mismo formato que el resto de enlaces

<p>Este otro párrafo contiene un <a href="#">enlace </a> y un punto de ancla <a name="ancla">aquí</a></p>
Y CSS
a:link {
 	text-decoration: none;
 	color: maroon; 
 }
 a:visited {
 	color: red;
 }
 a:active {
 	color: white;
 }
 a:hover {
 	text-decoration: underline;
 	color: blue;
 }

Veremos

Uso avanzado de pseudoclases

Mediante el uso de pseudoclases, y en particular del selector hover, podemos obtener resultados de diseño más complejos, como la creación de menús deplegables o elementos emergentes.

La clave está en anidar el elemento emergente dentro de un contenedor HTML (li, a, p, span...) y quitarle su visibilidad con la propiedad display: none;. Para hacerlo aparecer combinamos la pseudoclase hover del contenedor con el propio elemento para cambiar su display en ese momento.

Observemos el siguiente código:

<p>
Coloca el ratón sobre el interrogante => <span id="pop_info">?<span id="box_info"> Este elemento es un cuadro emergente activado mediante CSS</span></span>
</p>
El CSS
#box_info {
	position: absolute;
	font-size: 12px;
	font-weight: normal;
	line-height: normal;
	width: 150px;
	text-align: left;
	background-color: white;
	color: darkolivegreen;
	border: 1px solid;
	padding: 5px;
	top: -50%;
	left: 110%;
	display: none;
}
#pop_info:hover {
	background-color: white;
	color: darkolivegreen;
}
#pop_info:hover #box_info {
	display: initial;
}	

Y veamos su resultado

Pseudo-clases :first-child y :last-child

Estas dos pseudoclases permiten selecionar, respectivamente, el primer elemento y el último del tipo que sea dentro de un contenedor. Por ejemplo, el selector li:first-child seleccionará cualquier elemento <li> que sea el primer elemento dentro de su contenedor, que por lo general será un <ul>. Y li:last-child hará lo mismo con el último elemento dentro de su contenedor.

Esto quiere decir: si el primer elemento dentro de cualquier contenedor es un <li> tiene que ser seleccionado. Pero si antes de ese elemento, dentro del contenedor, hay otro elemento diferente, ese <li> ya no será seleccionado (porque no es el primero dentro del contenedor). Con el último elemento tiene el mismo comportamiento: Selecciona solamente el elemento si es el último dentro del contenedor.

Los selectores se pueden hacer más específicos, definiendo cual es el contenedor. Por ejemplo, article p:first-child y article p:last-child solo seleccionarán los párrafos dentro de los artículos cuando sean, respectivamente, el primer y el último elemento dentro de los artículos.

Ejemplo

El siguiente código:

<div class="pseudo">
	<p>lorem...</p>
	<p>lorem...</p>
	<p>lorem...</p>
	<p>lorem...</p>
	<p>lorem...</p>
</div>
Y el CSS
.pseudo p:first-child, .pseudo p:last-child {
 	color: lawngreen;
 }

Nos muestra

Selector por número concreto de elemento nth-child()

Permite seleccionar un elemento anidado que ocupe una posición específica dentro de la lista de nodos, siempre que el tipo seleccionado coincida con la posición. Si le indicamos li:nth-child(3), seleccionará el tercer elemento li de un contenedor, siempre y cuando este tercer elemento sea efectivamente un nodo li.

El siguiente código:

	<ul class="numerado">
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li>Elemento 4</li>
		<li>Elemento 5</li>
	</ul>
	
	.numerado li:nth-child(3) {
		color: red;
	}
	

Devolverá:

Además de los valores numéricos podemos usar dentro de los paréntesis las palabras clave even y odd para seleccionar directamente todos los elementos pares o impares de un listado.

	<ul class="impares">
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li>Elemento 4</li>
		<li>Elemento 5</li>
	</ul>
	.impares li:nth-child(odd) {
			background-color: orange;
		}
	

Tendremos:

Otra forma de definir elementos pares es :nth-child(2n), para los elementos impares podemos usar :nth-child(2n+1)

Selector para elementos que no cumplen el criterio dado. :not()

Mediante este selector aplicamos formato CSS a los elementos que no coinciden con lo especificado dentro de los paréntesis de la expresión not.

	<ul class="impares">
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li id="especial">Elemento 4</li>
		<li>Elemento 5</li>
	</ul>
	.impares li:not(#especial) {
			color: darkred;
	}

	

Tenemos:

Pseudo-Clases :first-of-type y :last-of-type

Estas son una variación de la primera, haciendo que se pueda seleccionar el primer elemento dentro de un contenedor (o el último) cuando es del tipo indicado, con independencia de si antes, o después, hay otros elementos en el contenedor de otro tipo. Veamos un ejempo:

<div class="tipo">
	<span>Texto</span>
	<p>lorem...</p>
	<p>lorem...</p>
	<p>lorem...</p>
	<p>lorem...</p>
	<p>lorem...</p>
	<span>Texto</span>
</div>

El siguiente código no va a devolver nada, puesto que el primer elemento del contenedor .tipo ni el último son <p>, y por lo tanto no se selecciona nada:

.tipo p:first-child, .tipo p:last-child {
 	color: lawngreen;
 }

Pero en cambio este CSS:

.tipo p:first-of-type, .tipo p:last-of-type {
 	color: lawngreen;
 }

Sí seleccionan cada elemento del tipo <p> que es el primero y el último de esa clase dentro de .tipo, sin importar lo que pueda haber antes o después:

Estos selectores se usan de la misma forma y con las mismas opciones que los selectores anteriores. Podemos referirnos a un elemento en concreto con la expresión :nth-of-type(), y también a los pares e impares con las mismas palabras clave.

PseudoClases para elementos de formulario. Selector :checked

Mediante CSS podemos cambiar el formato de un elemento input de tipo check-box, con un selector específico. Esto es muy útil en combinación con otros elementos para asociar de una manera indirecta, estilos CSS al evento click del ratón.

Veamos un ejemplo de selector :checked

	<div class="menu">
	<label for="ck_menu" class="txt-menu">Mostrar Menú</label>
	<input type="checkbox" id="ck_menu">
	<div class="menu-nav">
	<ul class="impares">
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li>Elemento 4</li>
		<li>Elemento 5</li>
	</ul>
	</div>
	</div>
	
	Y el CSS:
.txt-menu {
	font-size: 40px;
	font-family: sans-serif;
	font-weight: bold;
	color: darkred;
	cursor: pointer;
}
#ck_menu {
	display: none;
}
.menu-nav {
	display: none;
}
#ck_menu:checked + .menu-nav {
	display: block;
}

	

Permiten que al pulsar sobre el texto aparezca o desaparezca el menú:

El menú superior aparece o desaparece cuando pulsamos el check correspondiente

Pseudoclase para navegación. Elemento :target

Mediante el uso de este selector podemos acceder al elemento del documento identificado en la URL del sitio mediante un anclaje.

Si en la URL tenemos algo así: mi_archivo.html#destino, el selector :target afectará al nodo del documento que tenga un atributo id o name con el valor destino

Si la url cambia a mi_archivo.html#otro_destino, el formato especificado en el selector afectará ahora al elemento que se identifique con otro_destino.

Veamos un ejemplo de selector :target

Generamos una lista de enlaces que apuntan a diferentes párrafos o apartados del documento, y mediante el selector target formateamos el párrafo de destino.

<h3>Índice o Tabla de Contenidos</h3>
<ol>
<li><a href="#p1">Selecciona el primer párrafo</a></li>
<li><a href="#p2">Selecciona el segundo párrafo</a></li>
<li><a href="#p3">Selecciona el tercer párrafo.</a></li>
</ol>

<h3>Documento relacionado</h3>
<p id="p1">Al seleccionar la primera entrada en la tabla de arriba se resalta este párrafo</p>
<p id="p2">Y si seleccionamos la segunda es este el que queda resaltado</p>
<p id="p3">Lo mismo ocurre con el tercero, como vemos, es una forma de tener interactividad sin recurrir a JavaScript</p>
Y el selector:
:target {
	background-color: limegreen;
}
	

Devuelve este resultado

Listado completo de PseudoClases

En el siguiente enlace podemos consultar todas las pseudoclases disponibles:

https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes