Pseudoclases

<< Selectores avanzados Pseudoelementos >>

Las pseudoclases se utilizan para referenciar a ciertos comportamientos de los elementos HTML. Las pseudoclases se definen añadiendo dos puntos (:) antes de la pseudoclase.

Pseudoclases de enlaces

Son pseudoclases orientadas a hipervínculos o hiperenlaces (etiqueta <a>).

  • :link → Aquellos que no han sido visitado todavía
  • :visited → Aquellos que han sido visitados anteriormente

Veamos un ejemplo. Imaginad que queremos poner de color rojo y en negrita aquellos enlaces que aún no han sido visitados:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="14. pseudoclases.css">
</head>
<body>
    <h1>Ejemplo de pseudoclases</h1>
    <a href="https://www.google.es">Google</a><br>
    <a href="https://www.iessanvicente.com">IES</a><br>
</body>
</html>

Pseudoclases de ratón

Las siguientes pseudoclases se utilizan para cambiar el comportamiento cuando nos posicionamos o pulsamos un elemento con el ratón.

  • :hover → cuando pasamos el ratón por encima del elemento
  • :active → cuando estamos pulsando el elemento con el ratón

El ejemplo típico de :hover es cuando pasamos el ratón por encima de un enlace (<a>), vamos a cambiarle el color a la letra y a añadirle un padding a dicho elemento:

/* Se aplica cuando el cursor está sobre el enlace. */
a:hover {
    color: #dc3545;
    text-decoration: underline;
}

/* Se aplica en el momento exacto en que se hace click. */
a:active {
    color: #6f42c1;
}

Pseudoclases de interacción

Están orientadas a formularios y cómo interaccionan los usuarios con ellos:

  • :focus → cuando el elemento tiene el foco (ha pulsado sobre un input para introducir datos)
  • :checked → cuando la casilla ha sido marcada

Por ejemplo, le vamos a dar un borde verde al input con el foco:

.input-foco {
    padding: 8px;
    border: 1px solid gray;
    transition: all 0.2s; /* Hacemos la transición suave */
}

/* Cuando el usuario hace click o tabula aquí: */
.input-foco:focus {
    border-color: #f39c12;
    background-color: #fffacd;
    outline: none; /* Elimina el borde azul nativo */
}

/* Estilos de la etiqueta por defecto */
.label-check {
    color: #333;
    font-weight: normal;
}

/* Cuando la casilla está marcada: */
/* La pseudoclase se aplica al input, pero usamos el selector de hermano adyacente (+) */
/* para aplicar el estilo a la etiqueta (label) que está al lado. */
#acepto:checked + .label-check {
    /* CLAVE: Cambiar el estilo de la etiqueta para confirmar la selección */
    color: #27ae60;
    font-weight: bold;
    text-decoration: underline;
}

Pseudoclases de activación

De forma habitual, los elementos de un formulario HTML están activados, pero podemos querer desactivar un cierto campo en un momento dado añadiendo el atributo disabled en el HTML. Las distintas pseudoclases que nos permite detectar si un campo está activado/desactivado son:

  • :enabled → cuando el campo está activado
  • :disabled → cuando el campo está desactivado
  • :read-only → cuando el campo es de sólo lectura
  • :read-write → cuando el campo es editable por el usuario

Por ejemplo, vamos a darle un color de fondo blanco a los input que estén activos, y a los que no están activos los ponemos de color gris.

body { padding: 20px; }
.campo { margin-bottom: 15px; }
input[type="text"] {
    width: 300px;
    padding: 10px;
    margin-top: 5px;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: all 0.3s;
}


/* Cuando el campo tiene el atributo disabled */
input[type="text"]:disabled {
    background-color: #f8f9fa;
    color: #a0a0a0; 
    border-style: dashed;
    cursor: not-allowed; 
}


/* Cuando el campo tiene el atributo readonly */
input[type="text"]:read-only {
    background-color: #ffe0b2;
    border-color: #ff9800;
    color: #5d4037;
}

/* Cuando el campo NO tiene los atributos readonly O disabled */
input[type="text"]:read-write {
    background-color: #e8f5e9;
    border-color: #4caf50;
    font-weight: bold;
}

/* Cuando el campo NO tiene el atributo disabled */
/* Es similar a :read-write, pero engloba a :read-write Y :read-only */
/* Aquí la aplicamos al :read-write para añadirle un foco cuando esté activo */
input[type="text"]:enabled:focus {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Halo azul de foco */
    border-color: #007bff;
}

Pseudocalses de validación

Como sabemos, con HTML5 podemos hacer una primera validación a los campos de un formulario, asegurándonos que el usuario escribe un campo de forma correcta. Existen algunas pseudoclases para las validaciones:

  • :required → Cuando el campo es obligatorio (atributo html required)
  • :optional → Cuando el campo es opcional (por defecto todos son opcionales)
  • :invalid → Campo que no cumple la validación HTML5
  • :valid → Campo que cumple la validación HTML5
  • :out-of-range → Campos numéricos fuera de rango
  • :in-range → Campos numéricos dentro del rango

Por ejemplo, vamos a poner un borde azul a aquellos input que son de carácter obligatorio de rellenar:

<form>
        <h3>Datos de Usuario y Rango</h3>

        <div class="campo">
            <label for="email">Email (*Requerido):</label>
            <input type="email" id="email" required placeholder="ejemplo@dominio.com">
        </div>

        <div class="campo">
            <label for="telefono">Teléfono (Opcional):</label>
            <input type="text" id="telefono" placeholder="Opcional">
        </div>

        <div class="campo">
            <label for="edad">Edad (Min 18, Max 99):</label>
            <input type="number" id="edad" min="18" max="99" value="25">
        </div>

    </form>

Pseudocalses de negación, :not

La pseudoclase de negación, nos permite seleccionar todos los elementos que no cumplan los selectores indicados entre paréntesis. Por ejemplo, imaginad que queremos seleccionar todos los elementos <div> que no sean la clase container:

div:not(.container) {
     border: 2px solid blue;
}

Pseudoclases para elementos según su posición

Podemos acceder a ciertos elementos del documento HTML dependiendo de su posición y estructura de los elementos hijos:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo selectores pares e impares</title>
    <link rel="stylesheet" href="pares.css">
</head>

<body>
    <ul>
        <li>Ítem 1</li>
        <li>Ítem 2</li>
        <li>Ítem 3</li>
        <li>Ítem 4</li>
        <li>Ítem 5</li>
        <li>Ítem 6</li>
        <li>Ítem 7</li>
        <li>Ítem 8</li>
        <li>Ítem 9</li>
        <li>Ítem 10</li>
    </ul>
</body>

</html>

Por ejemplo, vamos a cambiar el fondo de un artículo para el primer y último strong.

<div id="contenido">
     <div class="articulo">
          <strong>Primer mensaje</strong>
          <span >Segundo mensaje</span>
          <strong >Tercer mensaje</strong>
          <strong >Último mensaje</strong>
     </div>
     <div class="articulo">
          <strong>Primer mensaje</strong>
          <span >Segundo mensaje</span>
          <strong >Tercer mensaje</strong>
          <strong >Último mensaje</strong>
     </div>
</div>

Si lo que queremos es seleccionar un elemento hijo en concreto pero que no es el primero ni el último, como hemos dicho usaríamos :nth-child(n). Por ejemplo, con strong:nth-child(1) estaríamos seleccionando el primer elemento hijo que además es un <strong>. Con esta pseudoclase por ejemplo, podríamos seleccionar todos los hijos pares con: :nth-child(2n), es decir, no es necesario poner un número.

Pseudoclases para elementos del mismo tipo

En el punto anterior hemos visto cómo seleccionar elementos independientemente del tipo, en este punto veremos cómo seleccionar solo a elementos del mismo tipo:

Las pseudoclases :fist-of-type y :last-of-type son equivalentes a :first-type y :last-type pero sólo teniendo en cuenta elementos del mismo tipo. En cambio las pseudoclases :nth-of-type(n) es la equivalente a :nth-child(n) y :nth-last-of-type(n) es la equivalente a :nth-last-child(n). Veamos un ejemplo:

<div id="contenido">
     <div class="articulo">
          <strong>Primer mensaje</strong>
          <span >Segundo mensaje</span>
          <strong >Tercer mensaje</strong>
          <strong >Último mensaje</strong>
     </div>
     <div class="articulo">
          <strong>Primer mensaje</strong>
          <strong >Segundo mensaje</strong>
          <span >Tercer mensaje</span>
          <strong >Cuarto mensaje</strong>
          <strong >Último mensaje</strong>
     </div>
</div>

Otras pseudoclases

Podemos encontrar otras pseudoclases como :only-child, :only-of-type o :empty entre otras en aquí

<< Selectores avanzados Pseudoelementos >>