Pseudoclases
Pseudoclases de enlacesPseudoclases de ratónPseudoclases de interacciónPseudoclases de activaciónPseudocalses de validaciónPseudocalses de negación, :notPseudoclases para elementos según su posiciónPseudoclases para elementos del mismo tipoOtras 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:

a:link {
     color: red;
     font-weight: bold;
}

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:

a:hover {
     color: steelblue;
     padding: 2px;
}

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:focus {
     border: 2px dotted #4C4;
}

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.

input:enabled {
     background-color: white;
}
input:disabled {
     background-color: grey;
}

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:

input:required {
     border: 2px solid blue;
}

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 >>