Sigo reforzando mis puntos débiles en CSS y hoy es el turno de las pseudoclases.

Las pseudoclases nos ayudan a definir un estado particular de un elemento. Se identifican mediante dos puntos (:), y es muy probable que ya las hayas usado antes en enlaces con algo como a:hover.

Te mostraré cómo usarlas para resolver problemas habituales de CSS, o si prefieres leer los ejemplos de MDN.

Cómo usar pseudoclases

La mejor forma de aprender es practicando. Por eso, vamos a realizar las siguientes tareas en nuestro marcado usando pseudoclases:

• La primera caja tendrá un borde.
• Quiero poner en mayúscula la primera letra de cada caja.
• Al pasar el cursor sobre la primera caja, aumentará su tamaño.
• Si la caja no es la primera, al pasar el cursor sobre ella reduciremos su opacidad.

<main>
  <div class="sandbox">
    <div class="box">
      <p>python</p>
    </div>
    <div class="box">
      <p>angular</p>
    </div>
    <div class="box">
      <p>react</p>
    </div>
  </div>
</main>

Enlace

La primera caja tendrá un borde

El primer punto es sencillo. Usar la pseudoclase :first-of-type nos ayuda a obtener el primer elemento que coincide con nuestro selector.

div.box:first-of-type {
	border: 5px solid green;
}

Enlace

Poner en mayúscula la primera letra de p

Si leíste mi artículo sobre combinadores de CSS, combinar nuestro selector con la pseudoclase :first-letter es una tarea muy sencilla.

div.box > p:first-letter {
	text-transform: uppercase;
}

Enlace

Al pasar el cursor sobre la primera caja, aumentamos su tamaño

Ya sabemos cómo usar pseudoclases para obtener la primera caja mediante :first-of-type, así que ahora solo la combinamos con :hover.

div.box:first-of-type:hover {
	width:200px;
	height: 200px;
}

Enlace

Si la caja no es la primera, reducir la opacidad al pasar el cursor

Otra pseudoclase muy útil es :not. Nos ayuda a usar un selector de negación. Podemos combinar :not con :first-of-type y :hover.

div.box:not(:first-of-type):hover{
	opacity:0.5
}

Enlace

Completamos todas las tareas usando pseudoclases. Nos ayudan a crear excelentes selectores y solucionar tareas cotidianas de CSS. En MDN tienes una documentación fantástica con más ejemplos sobre cómo usarlas.

Caso de uso real: el menú

El caso real consiste en crear un menú con los siguientes casos de uso:

• Por defecto, ocultar las opciones hijas.
• Al pasar el cursor (hover), mostrar el menú y al retirarlo, ocultarlo.
• La opción seleccionada tiene un fondo diferente.
• El menú sin elementos muestra una línea tachada.

La estructura HTML:

<div class="menu">
  <div class="option">
  	<span>Home</span>
  </div>
	<div class="option">
		<span>Javascript</span>
		<div class="child-option">
		<span>React</span>
		<span>Angular</span>
		</div>
	</div>
	<div class="option">
		<span>CSS</span>
		<div class="child-option">
		<span>Less</span>
		<span>Sass</span>
		</div>
	</div>
</div>

Enlace

Ocultar las opciones hijas por defecto

Ocultamos las opciones para luego usar la pseudoclase :hover, volver a mostrarlas y simular el comportamiento de un menú.

.child-option {
	display: none;
	background-color: black;
}

Enlace

Al pasar el cursor mostrar el menú y al salir ocultarlo

La pseudoclase :hover me permite seleccionar la opción hija y volver a hacerla visible. Con esto, el comportamiento fundamental de mostrar y ocultar queda funcionando.

.option:hover .child-option {
	display: flex;
	flex-direction: column;
}

Enlace

La opción seleccionada tiene un fondo diferente

Nuevamente :hover y la combinación de selectores CSS nos ayudan. Al usar > obtenemos únicamente el span hijo directo de una opción sin seleccionar los demás.

Para el selector del div con las opciones hijas usamos el combinador > junto a la pseudoclase :hover. El selector queda como .option > span:hover. Para las opciones secundarias, usamos .child-option span:hover para definir el color de fondo cuando pasamos el cursor sobre su span.

.option > span:hover {
	background-color: blue;
}
 
.child-option span:hover {
	background-color: darkolivegreen;
}

Enlace

Los elementos sin opciones muestran una línea tachada

La pseudoclase only-child nos ayuda a detectar si es el único elemento que coincide con el selector. El div.option valida que el span sea hijo único y le aplica el estilo correspondiente.

div.option span:only-child {
	text-decoration: line-through;
}

Enlace

¡Listo!

Esto te da un buen punto de partida para comenzar a usar las pseudoclases. Si te gustó este artículo, por favor compártelo.