Pseudoclases CSS

En este artículo vamos a explicar qué son las pseudoclases CSS, para qué se utilizan y cómo funcionan en el diseño de páginas HTML. Este artículo está relacionado con los selectores CSS publicado anteriormente.

Las pseudoclases CSS son selectores especiales que permiten seleccionar y aplicar estilos a elementos HTML en función de su estado o posición en relación con otros elementos. Con las pseudoclases de CSS también podemos aplicar estilos condicionales a elementos en respuesta a eventos del usuario o a la estructura del documento HTML.

Las pseudoclases en CSS comienzan con dos puntos : y se agregan después de un selector de elemento o de otro selector, permitiendo una selección más específica y dinámica de elementos en una página web.

Índice de pseudoclases CSS

En este listado se muestran las pseudoclases CSS estándar por órden alfabético, vamos a explicar cada una de ellas con ejemplos a continuación:

Pseudoclase `:active`

La pseudoclase :active en CSS se utiliza para aplicar estilos a un elemento mientras está siendo activado por el usuario. El estado :active se activa durante el tiempo en el que se presiona un elemento, como un enlace o un botón, antes de que se libere el clic del mouse. Un ejemplo de CSS que utiliza la pseudoclase :active sería:

Estilos CSS para la pseudoclase :active

/* Estilos para la pseudoclase :active */
a:active {
    color: red; /* Cambia el color del enlace a rojo mientras se está haciendo clic */
    text-decoration: underline; /* Subraya el texto del enlace mientras se está haciendo clic */
}

En este ejemplo de CSS:

El pseudoclase a:active selecciona todos los enlaces (<a>) mientras están siendo activados por el usuario.

Aaplicación HTML del pseudoclase :active:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :active</title>
</head>
<body>
    <a href="https://www.ejemplo.com">Haz clic aquí</a>
</body>
</html>

En este ejemplo HTML, los estilos definidos en la regla CSS a:active se aplicarán al enlace mientras se está haciendo clic en él. Durante el clic, el color del texto del enlace cambiará a rojo y el texto del enlace estará subrayado. Estos estilos proporcionan un efecto visual para indicar al usuario que el enlace está siendo activado.

Pseudoclase `:checked`

La pseudoclase :checked en CSS se aplica a elementos de entrada, como casillas de verificación (checkboxes) y botones de opción (radio buttons), que están marcados o seleccionados por el usuario. Esto permite aplicar estilos a elementos específicos que están marcados o seleccionados en un formulario. Un ejemplo de CSS que utiliza la pseudoclase :checked sería:

Estilos CSS para la pseudoclase :checked

/* Estilos para la pseudoclase :checked */
input:checked {
    border: 2px solid green; /* Agrega un borde verde a los elementos de entrada marcados */
    background-color: lightgreen; /* Cambia el color de fondo a verde claro para los elementos de entrada marcados */
}

En este ejemplo de CSS:

La pseudoclase input:checked selecciona todos los elementos de entrada que están marcados o seleccionados por el usuario.

Aaplicación HTML de la pseudoclase :checked

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :checked</title>
</head>
<body>
    <label for="opcion1">Opción 1</label>
    <input type="radio" id="opcion1" name="opcion" checked>
    <label for="opcion2">Opción 2</label>
    <input type="radio" id="opcion2" name="opcion">
    <label for="casilla">Casilla de verificación</label>
    <input type="checkbox" id="casilla" checked>
</body>
</html>

En este ejemplo HTML, los estilos definidos en la regla CSS input:checked se aplicarán a los elementos de entrada que estén marcados o seleccionados por el usuario. Los elementos marcados tendrán un borde verde de 2 píxeles y un color de fondo verde claro debido a esta regla. Los elementos de entrada no marcados no se verán afectados por esta regla.

Pseudoclases CSS `:dir()`

La pseudoclase :dir() en CSS se utiliza para aplicar estilos a elementos que están escritos en un determinado idioma o dirección. El valor pasado a :dir() puede ser ltr (left-to-right) para indicar que el texto se escribe de izquierda a derecha, o rtl (right-to-left) para indicar que el texto se escribe de derecha a izquierda. Un ejemplo de CSS que utiliza la pseudoclase :dir() sería:

Eestilos CSS para la pseudoclase :dir()

/* Estilos para la pseudoclase :dir() */
:dir(ltr) {
    text-align: left; /* Alinea el texto a la izquierda para el texto que se escribe de izquierda a derecha */
}

:dir(rtl) {
    text-align: right; /* Alinea el texto a la derecha para el texto que se escribe de derecha a izquierda */
}

En este ejemplo de CSS, :dir(ltr) se aplicaría al texto que se escribe de izquierda a derecha, mientras que :dir(rtl) se aplicaría al texto que se escribe de derecha a izquierda.

Aplicación HTML de la pseudoclase :dir()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :dir()</title>
</head>
<body>
    <p dir="ltr">Este es un ejemplo de texto escrito de izquierda a derecha.</p>
    <p dir="rtl">זהו דוגמה לטקסט שכתוב מימין לשמאל.</p>
</body>
</html>

En este ejemplo HTML, la dirección del texto se especifica mediante el atributo dir en los párrafos. Dependiendo de la dirección especificada, los estilos definidos en las reglas CSS correspondientes se aplicarán al texto en consecuencia.

Pseudoclase `:disabled`

La pseudoclase :disabled en CSS se utiliza para seleccionar elementos de entrada que están desactivados. Los elementos de entrada pueden ser botones, casillas de verificación, botones de opción, campos de texto u otros elementos interactivos que se pueden deshabilitar. Un ejemplo de CSS que utiliza la pseudoclase :disabled sería:

Eestilos CSS para la pseudoclase :disabled

/* Estilos para la pseudoclase :disabled */
input:disabled {
    background-color: lightgray; /* Cambia el color de fondo a gris claro para los elementos deshabilitados */
    cursor: not-allowed; /* Cambia el cursor a 'no permitido' para indicar que el elemento está deshabilitado */
    opacity: 0.6; /* Reduce la opacidad de los elementos deshabilitados para indicar su estado inactivo */
}

En este ejemplo de CSS, input:disabled seleccionaría cualquier elemento de entrada deshabilitado y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :disabled

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :disabled</title>
</head>
<body>
    <input type="text" value="Texto activo">
    <input type="text" value="Texto deshabilitado" disabled>
    <button>Botón activo</button>
    <button disabled>Botón deshabilitado</button>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos de entrada, como campos de texto y botones, algunos de los cuales están deshabilitados utilizando el atributo disabled. Los estilos definidos en la regla CSS input:disabled se aplicarán a los elementos que están deshabilitados, lo que cambiará su apariencia para indicar que están inactivos.

Pseudoclase `:empty`

La pseudoclase :empty en CSS se utiliza para seleccionar elementos que no tienen contenido interno. Esto incluye elementos sin texto y sin elementos hijos, como <div></div> o <p></p>. Un ejemplo de CSS que utiliza la pseudoclase :empty sería:

Estilos CSS para la pseudoclase :empty

/* Estilos para la pseudoclase :empty */
div:empty {
    border: 2px dashed red; /* Agrega un borde punteado rojo a los elementos div vacíos */
    height: 50px; /* Establece una altura de 50 píxeles para los elementos div vacíos */
}

En este ejemplo de CSS, div:empty seleccionaría todos los elementos <div> que no tienen contenido interno y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :empty

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :empty</title>
</head>
<body>
    <div>Este div tiene contenido</div>
    <div></div>
    <div><p>Este div contiene un párrafo</p></div>
    <div></div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos <div>, algunos de los cuales están vacíos. Los estilos definidos en la regla CSS div:empty se aplicarán a los elementos <div> que no tienen contenido interno, lo que cambiará su apariencia para indicar que están vacíos.

Pseudoclase `:enabled`

La pseudoclase :enabled en CSS se utiliza para seleccionar elementos de entrada que están habilitados, lo que permite aplicar estilos a estos elementos en particular. Los elementos de entrada pueden ser botones, campos de texto u otros elementos interactivos que se pueden habilitar o deshabilitar. Un ejemplo de CSS que utiliza la pseudoclase :enabled sería:

Estilos CSS para la pseudoclase :enabled

/* Estilos para la pseudoclase :enabled */
input:enabled {
    background-color: lightgreen; /* Cambia el color de fondo a verde claro para los elementos habilitados */
    cursor: pointer; /* Cambia el cursor a 'puntero' para indicar que el elemento está habilitado y es interactivo */
}

En este ejemplo de CSS, input:enabled selecciona todos los elementos de entrada que están habilitados y aplica los estilos correspondientes.

Aplicación HTML de la pseudoclase :enabled

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :enabled</title>
</head>
<body>
    <input type="text" value="Texto habilitado">
    <input type="text" value="Texto deshabilitado" disabled>
    <button>Botón habilitado</button>
    <button disabled>Botón deshabilitado</button>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos de entrada, como campos de texto y botones, algunos de los cuales están habilitados mientras que otros están deshabilitados utilizando el atributo disabled. Los estilos definidos en la regla CSS input:enabled se aplicarán a los elementos que están habilitados, lo que cambiará su apariencia para indicar que están listos para interactuar.

Pseudoclase `:first-child`

La pseudoclase :first-child en CSS se utiliza para seleccionar el primer elemento hijo de su tipo dentro de su elemento padre. Permite aplicar estilos específicos al primer elemento hijo de un tipo determinado. Un ejemplo de CSS que utiliza la pseudoclase :first-child sería:

Estilos CSS para la pseudoclase :first-child

/* Estilos para la pseudoclase :first-child */
p:first-child {
    font-weight: bold; /* Aplica negrita al primer párrafo dentro de su contenedor padre */
}

En este ejemplo de CSS, p:first-child seleccionaría el primer párrafo dentro de su contenedor padre y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :first-child

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :first-child</title>
</head>
<body>
    <div>
        <p>Primer párrafo con negrita</p>
        <p>Segundo párrafo</p>
        <p>Tercer párrafo</p>
    </div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos <p> dentro de un <div>, y el estilo definido en la regla CSS p:first-child se aplica al primer párrafo dentro del <div>, haciendo que el texto se muestre en negrita. Esto ilustra cómo puedes usar la pseudoclase :first-child para aplicar estilos específicos al primer elemento hijo de un tipo determinado en tu documento HTML.

Pseudoclase `:first-of-type`

La pseudoclase :first-of-type en CSS se utiliza para seleccionar el primer elemento de su tipo entre los elementos hermanos dentro de su elemento padre. Permite aplicar estilos específicos al primer elemento de un tipo determinado entre elementos hermanos. Un ejemplo de CSS que utiliza la pseudoclase :first-of-type sería:

Estilos CSS para la pseudoclase :first-of-type

/* Estilos para la pseudoclase :first-of-type */
p:first-of-type {
    color: blue; /* Cambia el color del primer párrafo de su tipo a azul */
}

En este ejemplo de CSS, p:first-of-type seleccionaría el primer párrafo de su tipo entre elementos hermanos y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :first-of-type

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :first-of-type</title>
</head>
<body>
    <div>
        <p>Primer párrafo de su tipo en azul</p>
        <p>Segundo párrafo de su tipo</p>
        <span>Span no afectado por la pseudoclase</span>
        <p>Tercer párrafo de su tipo</p>
    </div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos <p> y un elemento <span> dentro de un <div>. El estilo definido en la regla CSS p:first-of-type se aplica al primer párrafo de su tipo, cambiando su color a azul. Esto ilustra cómo puedes usar la pseudoclase :first-of-type para aplicar estilos específicos al primer elemento de un tipo determinado entre elementos hermanos en tu documento HTML.

Pseudoclase `:fullscreen`

La pseudoclase :fullscreen en CSS se utiliza para aplicar estilos a un elemento que está en modo de pantalla completa. Sin embargo, es importante tener en cuenta que esta pseudoclase tiene un soporte limitado y se utiliza principalmente en contextos específicos, como al trabajar con la API Fullscreen descrita en el artículo Imagen a pantalla completa.

Dado que el modo de pantalla completa generalmente se activa mediante JavaScript, el uso de esta pseudoclase puede requerir manipulación del DOM a través de eventos. Un ejemplo de cómo se podría aplicar sería:

Estilos CSS para la pseudoclase :fullscreen

/* Estilos para la pseudoclase :fullscreen */
:fullscreen {
    background-color: black; /* Cambia el color de fondo a negro en el modo de pantalla completa */
    color: white; /* Cambia el color del texto a blanco en el modo de pantalla completa */
}

En este ejemplo de CSS, :fullscreen aplicaría los estilos especificados a un elemento en modo de pantalla completa.

La aplicación HTML de la pseudoclase :fullscreen usando un navegador que admita el modo de pantalla completa podría ser la siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :fullscreen</title>
</head>
<body>
    <h1>Modo de pantalla completa</h1>
    <p>Presiona el botón para activar el modo de pantalla completa.</p>
    <button onclick="openFullscreen()">Abrir pantalla completa</button>

    <script>
        function openFullscreen() {
            var elem = document.documentElement;
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) { /* Firefox */
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari, Opera */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE/Edge */
                elem.msRequestFullscreen();
            }
        }
    </script>
</body>
</html>

En este ejemplo, al presionar el botón «Abrir pantalla completa», el contenido de la página se expandirá a pantalla completa y los estilos definidos en :fullscreen se aplicarán al elemento en el modo de pantalla completa, cambiando el color de fondo a negro y el color del texto a blanco. Este es un ejemplo básico que muestra cómo se puede aplicar la pseudoclase :fullscreen en una página web.

Ten en cuenta que el uso de esta pseudoclase puede requerir un enfoque más complejo, como la utilización de JavaScript y la API Fullscreen para activar y desactivar el modo de pantalla completa.

Pseudoclase `:focus`

La pseudoclase :focus en CSS se utiliza para aplicar estilos a un elemento cuando recibe el foco, como cuando un usuario hace clic en un campo de entrada o lo selecciona mediante navegación con el teclado. Esto es comúnmente utilizado para resaltar visualmente los elementos activos, como campos de entrada de formularios. Un ejemplo de CSS que utiliza la pseudoclase :focus sería:

Estilos CSS para la pseudoclase :focus

/* Estilos para la pseudoclase :focus */
input:focus {
    border: 2px solid blue; /* Agrega un borde azul alrededor del campo de entrada activo */
    outline: none; /* Elimina el contorno predeterminado al enfocar el campo de entrada */
}

En este ejemplo de CSS, input:focus seleccionaría un campo de entrada cuando esté enfocado y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :focus

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :focus</title>
</head>
<body>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre"><br><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"><br><br>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje"></textarea>
</body>
</html>

En este ejemplo HTML, se muestran varios campos de entrada y un área de texto. Cuando un campo de entrada recibe el foco, se aplican los estilos definidos en la regla CSS input:focus. Esto resalta visualmente el campo de entrada activo para el usuario.

Pseudoclase `:hover`

La pseudoclase :hover en CSS se utiliza para aplicar estilos a un elemento cuando el cursor del mouse se encuentra sobre él, lo que permite crear efectos visuales interactivos al interactuar con los elementos de una página web. Un ejemplo de CSS que utiliza la pseudoclase :hover sería:

Estilos CSS para la pseudoclase :hover

/* Estilos para la pseudoclase :hover */
button:hover {
    background-color: lightblue; /* Cambia el color de fondo del botón a azul claro cuando el cursor está sobre él */
    color: white; /* Cambia el color del texto a blanco cuando el cursor está sobre el botón */
}

En este ejemplo de CSS, button:hover seleccionaría un botón cuando el cursor esté sobre él y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :hover

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :hover</title>
</head>
<body>
    <button>¡Pasa el cursor sobre mí!</button>
</body>
</html>

En este ejemplo HTML, se muestra un botón que cambia su color de fondo y el color del texto cuando el cursor se encuentra sobre él. Esto demuestra cómo se puede utilizar la pseudoclase :hover para crear efectos visuales interactivos al interactuar con elementos en una página web.

Pseudoclase `:indeterminate`

La pseudoclase :indeterminate en CSS se utiliza para seleccionar elementos de entrada, como casillas de verificación (<input type="checkbox>) y botones de radio (<input type="radio>), cuando están en un estado indeterminado. Este estado se utiliza comúnmente para indicar que el valor del elemento no se ha establecido o es desconocido. Un ejemplo de CSS que utiliza la pseudoclase :indeterminate sería:

Estilos CSS para la pseudoclase :indeterminate

/* Estilos para la pseudoclase :indeterminate */
input:indeterminate {
    background-color: yellow; /* Cambia el color de fondo a amarillo para los elementos en estado indeterminado */
}

En este ejemplo de CSS, input:indeterminate seleccionaría los elementos de entrada en estado indeterminado y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :indeterminate

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :indeterminate</title>
</head>
<body>
    <input type="checkbox" id="opcion1" name="opcion1" checked>
    <label for="opcion1">Opción 1</label><br><br>
    <input type="checkbox" id="opcion2" name="opcion2">
    <label for="opcion2">Opción 2</label><br><br>
    <input type="checkbox" id="opcion3" name="opcion3" indeterminate>
    <label for="opcion3">Opción 3 (Indeterminada)</label><br><br>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos de casillas de verificación, uno de los cuales está en un estado indeterminado. Los estilos definidos en la regla CSS input:indeterminate cambiarían el color de fondo del elemento en estado indeterminado a amarillo, lo que permite resaltar visualmente el estado del elemento.

Pseudoclase `:in-range`

La pseudoclase :in-range en CSS se utiliza para seleccionar elementos de entrada, como campos de número (<input type="number>) y campos de rango (<input type="range>), que están dentro de su rango válido definido por los atributos min y max. Un ejemplo de CSS que utiliza la pseudoclase :in-range sería:

Estilos CSS para la pseudoclase :in-range

/* Estilos para la pseudoclase :in-range */
input:in-range {
    border: 2px solid green; /* Agrega un borde verde alrededor del campo de entrada que está dentro del rango válido */
}

En este ejemplo de CSS, input:in-range seleccionaría los campos de entrada que están dentro de su rango válido y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :in-range

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :in-range</title>
</head>
<body>
    <label for="vol">Volumen (0 to 10):</label>
    <input type="number" id="vol" name="vol" min="0" max="10" value="5">
</body>
</html>

En este ejemplo HTML, se muestra un campo de número que acepta valores entre 0 y 10. Los estilos definidos en la regla CSS input:in-range agregarían un borde verde alrededor del campo de entrada cuando su valor está dentro del rango especificado, lo que indica que el valor es válido.

Pseudoclase `:invalid`

La pseudoclase :invalid en CSS se utiliza para seleccionar y aplicar estilos a elementos de formulario que no son válidos según sus atributos de validación. Por ejemplo, un campo de entrada de correo electrónico que no contiene un formato de dirección de correo electrónico válido se consideraría inválido. Un ejemplo de CSS que utiliza la pseudoclase :invalid sería:

Estilos CSS para la pseudoclase :invalid

/* Estilos para la pseudoclase :invalid */
input:invalid {
    border: 2px solid red; /* Agrega un borde rojo alrededor del campo de entrada inválido */
}

En este ejemplo de CSS, input:invalid seleccionaría los campos de entrada que son inválidos según sus atributos de validación y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :invalid

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :invalid</title>
</head>
<body>
    <label for="correo">Correo electrónico:</label>
    <input type="email" id="correo" name="correo" required>
</body>
</html>

En este ejemplo HTML, se muestra un campo de entrada de correo electrónico que requiere un formato de dirección de correo electrónico válido. Los estilos definidos en la regla CSS input:invalid agregarían un borde rojo alrededor del campo de entrada si el valor ingresado no es válido, lo que indica que el campo no ha pasado la validación requerida.

Pseudoclases CSS `:lang()`

La pseudoclase :lang() en CSS se utiliza para seleccionar elementos que tienen un atributo de idioma específico. Esta pseudoclase es útil para aplicar estilos a elementos que están en un idioma particular, lo que permite ajustar la presentación según el idioma utilizado en el contenido. Un ejemplo de CSS que utiliza la pseudoclase :lang() sería:

Estilos CSS para la pseudoclase :lang()

/* Estilos para la pseudoclase :lang() */
p:lang(es) {
    font-style: italic; /* Aplica estilo de fuente en cursiva para párrafos en español */
}

En este ejemplo de CSS, p:lang(es) seleccionaría los párrafos que están en español y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :lang()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :lang()</title>
</head>
<body>
    <p lang="es">Este es un ejemplo de párrafo en español.</p>
    <p lang="en">This is an example of a paragraph in English.</p>
</body>
</html>

En este ejemplo HTML, se muestran dos párrafos, uno en español y otro en inglés. La regla CSS p:lang(es) aplicaría el estilo de fuente en cursiva al párrafo en español. Esto ilustra cómo se puede utilizar la pseudoclase :lang() para aplicar estilos específicos a elementos en función del idioma especificado.

Pseudoclase `:last-child`

La pseudoclase :last-child en CSS se utiliza para seleccionar el último elemento hijo de su tipo dentro de su elemento padre. Permite aplicar estilos específicos al último elemento entre un conjunto de elementos hermanos. Unn ejemplo de CSS que utiliza la pseudoclase :last-child sería:

Estilos CSS para la pseudoclase :last-child

/* Estilos para la pseudoclase :last-child */
p:last-child {
    font-weight: bold; /* Aplica el peso de la fuente en negrita al último párrafo entre elementos hermanos */
}

En este ejemplo de CSS, p:last-child seleccionaría el último párrafo entre elementos hermanos y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :last-child

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :last-child</title>
</head>
<body>
    <div>
        <p>Este es el primer párrafo.</p>
        <p>Este es el segundo párrafo.</p>
        <p>Este es el último párrafo que será afectado por la pseudoclase last-child.</p>
    </div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos <p> dentro de un <div>. La regla CSS p:last-child aplicaría el peso de la fuente en negrita al último párrafo entre elementos hermanos, lo que lo destacaría visualmente. Esto ilustra cómo se puede utilizar la pseudoclase :last-child para aplicar estilos específicos al último elemento entre elementos hermanos en un documento HTML.

Pseudoclase `:last-of-type`

La pseudoclase :last-of-type en CSS se utiliza para seleccionar el último elemento de un tipo específico entre elementos hermanos dentro de su elemento padre. Esto permite aplicar estilos al último elemento de un tipo particular entre un conjunto de elementos hermanos del mismo tipo. Un ejemplo de CSS que utiliza la pseudoclase :last-of-type sería:

Estilos CSS para la pseudoclase :last-of-type

/* Estilos para la pseudoclase :last-of-type */
p:last-of-type {
    color: red; /* Cambia el color del último párrafo del tipo especificado entre elementos hermanos */
}

En este ejemplo de CSS, p:last-of-type seleccionaría el último párrafo entre elementos hermanos y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :last-of-type

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :last-of-type</title>
</head>
<body>
    <div>
        <p>Este es el primer párrafo.</p>
        <p>Este es el segundo párrafo.</p>
        <p>Este es el último párrafo de este tipo que será afectado por la pseudoclase last-of-type.</p>
    </div>
    <div>
        <span>Este es el primer span.</span>
        <span>Este es el último span de este tipo que será afectado por la pseudoclase last-of-type.</span>
    </div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos <p> y <span> dentro de diferentes <div>. La regla CSS p:last-of-type cambiaría el color del último párrafo entre elementos hermanos a rojo, mientras que span:last-of-type cambiaría el color del último span entre elementos hermanos. Esto demuestra cómo se puede utilizar la pseudoclase :last-of-type para aplicar estilos al último elemento de un tipo particular entre elementos hermanos en un documento HTML.

Pseudoclase `:link`

La pseudoclase :link en CSS se utiliza para seleccionar y aplicar estilos a los enlaces que no han sido visitados por el usuario. Permite establecer estilos específicos para los hipervínculos que aún no han sido accedidos. Un ejemplo de CSS que utiliza la pseudoclase :link sería:

Estilos CSS para la pseudoclase :link

/* Estilos para la pseudoclase :link */
a:link {
    color: blue; /* Cambia el color del enlace a azul para los enlaces no visitados */
    text-decoration: underline; /* Subraya el texto del enlace para los enlaces no visitados */
}

En este ejemplo de CSS, a:link seleccionaría los enlaces que no han sido visitados y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :link

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :link</title>
</head>
<body>
    <p>Visita los siguientes enlaces:</p>
    <a href="https://www.ejemplo.com">Enlace 1</a>
    <a href="https://www.otroejemplo.com">Enlace 2</a>
</body>
</html>

En este ejemplo HTML, se muestran dos enlaces. La regla CSS a:link cambiaría el color del enlace a azul y subrayaría el texto del enlace para los enlaces que no han sido visitados, lo que proporciona una indicación visual de los enlaces disponibles para que el usuario los explore.

Pseudoclases CSS `:not()`

La pseudoclase :not() en CSS se utiliza para seleccionar elementos que no coinciden con un selector específico. Esto permite aplicar estilos a elementos que no cumplen con ciertos criterios de selección. Un ejemplo de CSS que utiliza la pseudoclase :not() sería:

Estilos CSS para la pseudoclase :not()

/* Estilos para la pseudoclase :not() */
p:not(.destacado) {
    color: gray; /* Cambia el color del texto a gris para los párrafos que no tienen la clase 'destacado' */
}

En este ejemplo de CSS, p:not(.destacado) seleccionaría los párrafos que no tienen la clase ‘destacado’ y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :not()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :not()</title>
</head>
<body>
    <p>Este es un párrafo normal.</p>
    <p class="destacado">Este es un párrafo destacado.</p>
    <p>Este es otro párrafo normal.</p>
</body>
</html>

En este ejemplo HTML, se muestran varios párrafos, uno de los cuales tiene la clase ‘destacado’. La regla CSS p:not(.destacado) cambiaría el color del texto a gris para los párrafos que no tienen la clase ‘destacado’, lo que proporciona una forma de aplicar estilos a elementos específicos según ciertos criterios de selección.

Pseudoclases CSS :nth

El prefijo «nth-» en las pseudoclases CSS, como en :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, se refiere a la posición de un elemento dentro de un grupo específico de elementos. Estas pseudoclases CSS permiten seleccionar elementos basados en su posición específica dentro de un grupo de elementos similares.

El prefijo «nth-» es una abreviatura de «n-th», donde «n» representa un número específico. Estas pseudoclases CSS son útiles cuando necesitas seleccionar elementos específicos en función de su posición en relación con otros elementos similares dentro del mismo contenedor.

Por ejemplo, la pseudoclase :nth-child selecciona elementos en función de su posición entre los hijos de su elemento padre. La pseudoclase :nth-of-type selecciona elementos en función de su posición entre los elementos del mismo tipo dentro de su elemento padre.

En resumen, el prefijo «nth-» en las pseudoclases CSS indica que se está seleccionando un elemento en función de su posición relativa dentro de un grupo específico de elementos, lo que proporciona una forma más precisa de aplicar estilos a elementos específicos en función de su posición en la estructura del documento.

Pseudoclases CSS `:nth-child()`

La pseudoclase :nth-child() en CSS se utiliza para seleccionar elementos específicos en función de su posición en relación con sus elementos hermanos. Permite aplicar estilos a elementos seleccionados utilizando una fórmula matemática. Un ejemplo de CSS que utiliza la pseudoclase :nth-child() sería:

Estilos CSS para la pseudoclase :nth-child()

/* Estilos para la pseudoclase :nth-child() */
p:nth-child(2) {
    color: red; /* Cambia el color del segundo párrafo a rojo */
}

En este ejemplo de CSS, p:nth-child(2) seleccionaría el segundo párrafo y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :nth-child()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :nth-child()</title>
</head>
<body>
    <p>Este es el primer párrafo.</p>
    <p>Este es el segundo párrafo que será afectado por la pseudoclase nth-child.</p>
    <p>Este es el tercer párrafo.</p>
</body>
</html>

En este ejemplo HTML, se muestran varios párrafos. La regla CSS p:nth-child(2) cambiaría el color del texto del segundo párrafo a rojo, lo que permite resaltar visualmente el segundo párrafo en relación con otros elementos hermanos. Esto ilustra cómo se puede utilizar la pseudoclase :nth-child() para aplicar estilos a elementos específicos según su posición en relación con sus elementos hermanos.

Patrones matemáticos para nth-child()

En las pseudoclases CSS como :nth-child() se pueden utilizar con diferentes fórmulas matemáticas para seleccionar elementos específicos en función de su posición en relación con sus elementos hermanos. Algunos ejemplos básicos de operaciones matemáticas que se pueden aplicar con nth-child() serían:

Seleccionar el primer elemento:

p:nth-child(1) {
    /* Estilos para el primer párrafo */
}

Seleccionar el segundo elemento:

p:nth-child(2) {
    /* Estilos para el segundo párrafo */
}

Seleccionar elementos pares:

p:nth-child(even) {
    /* Estilos para los párrafos pares */
}

Seleccionar elementos impares:

p:nth-child(odd) {
    /* Estilos para los párrafos impares */
}

Seleccionar elementos a partir de un determinado índice:

p:nth-child(n+3) {
    /* Estilos para los párrafos a partir del tercer elemento */
}

Seleccionar elementos en un patrón específico:

p:nth-child(3n) {
    /* Estilos para los párrafos en un patrón de 3 */
}

Estos ejemplos proporcionan una idea de cómo se pueden utilizar las operaciones matemáticas básicas con pseudoclasases CSS como nth-child() para seleccionar y aplicar estilos a elementos específicos en un documento HTML. Puedes experimentar con diferentes fórmulas matemáticas para lograr una variedad de selecciones de elementos más complejas y específicas.

Pseudoclases CSS `:nth-last-child()`

La pseudoclase :nth-last-child() en CSS se utiliza para seleccionar elementos específicos en función de su posición en relación con sus elementos hermanos, contando desde el final. Esto permite aplicar estilos a elementos seleccionados utilizando una fórmula matemática que cuenta desde el último elemento. Un ejemplo de CSS que utiliza la pseudoclase :nth-last-child() sería:

Estilos CSS para la pseudoclase :nth-last-child()

/* Estilos para la pseudoclase :nth-last-child() */
p:nth-last-child(2) {
    color: blue; /* Cambia el color del segundo párrafo desde el final a azul */
}

En este ejemplo de CSS, p:nth-last-child(2) seleccionaría el segundo párrafo desde el final y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :nth-last-child()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :nth-last-child()</title>
</head>
<body>
    <p>Este es el primer párrafo.</p>
    <p>Este es el segundo párrafo desde el final que será afectado por la pseudoclase nth-last-child.</p>
    <p>Este es el tercer párrafo.</p>
</body>
</html>

En este ejemplo HTML, se muestran varios párrafos. La regla CSS p:nth-last-child(2) cambiaría el color del texto del segundo párrafo desde el final a azul, lo que permite resaltar visualmente el segundo párrafo desde el final en relación con otros elementos hermanos. Esto ilustra cómo se puede utilizar la pseudoclase :nth-last-child() para aplicar estilos a elementos específicos según su posición contando desde el final.

Nota: se aplican los mismo patrones matemáticos que para nth-child() salvo que la cuenta empieza por el último elemento.

Pseudoclases CSS `:nth-last-of-type()`

La pseudoclase :nth-last-of-type() en CSS se utiliza para seleccionar elementos específicos de un tipo particular en función de su posición en relación con sus elementos hermanos, contando desde el final. Esto permite aplicar estilos a elementos seleccionados de un tipo específico utilizando una fórmula matemática que cuenta desde el último elemento de ese tipo. Un ejemplo de CSS que utiliza la pseudoclase :nth-last-of-type() sería:

Estilos CSS para la pseudoclase :nth-last-of-type()

/* Estilos para la pseudoclase :nth-last-of-type() */
p:nth-last-of-type(2) {
    color: green; /* Cambia el color del segundo párrafo desde el final del tipo especificado a verde */
}

En este ejemplo de CSS, p:nth-last-of-type(2) seleccionaría el segundo párrafo desde el final del tipo especificado y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :nth-last-of-type()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :nth-last-of-type()</title>
</head>
<body>
    <div>
        <p>Este es el primer párrafo de este tipo.</p>
        <p>Este es el segundo párrafo desde el final de este tipo que será afectado por la pseudoclase nth-last-of-type.</p>
        <p>Este es el tercer párrafo de este tipo.</p>
    </div>
    <div>
        <span>Este es el primer span de este tipo.</span>
        <span>Este es el segundo span desde el final de este tipo que será afectado por la pseudoclase nth-last-of-type.</span>
        <span>Este es el tercer span de este tipo.</span>
    </div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos de tipo <p> y <span> dentro de diferentes contenedores <div>. La regla CSS p:nth-last-of-type(2) cambiaría el color del segundo párrafo desde el final del tipo especificado a verde, mientras que span:nth-last-of-type(2) cambiaría el color del segundo span desde el final del tipo especificado a verde. Esto demuestra cómo se puede utilizar la pseudoclase :nth-last-of-type() para aplicar estilos al segundo elemento desde el final de un tipo específico entre elementos hermanos.

Nota: se aplican los mismo patrones matemáticos que para nth-child() salvo que la cuenta empieza por el último elemento.

Pseudoclases CSS `:nth-of-type()`

La pseudoclase :nth-of-type() en CSS se utiliza para seleccionar elementos específicos de un tipo particular en función de su posición en relación con sus elementos hermanos. Esto permite aplicar estilos a elementos seleccionados de un tipo específico utilizando una fórmula matemática. Un ejemplo de CSS que utiliza la pseudoclase :nth-of-type() sería:

Estilos CSS para la pseudoclase :nth-of-type()

/* Estilos para la pseudoclase :nth-of-type() */
p:nth-of-type(2) {
    color: red; /* Cambia el color del segundo párrafo del tipo especificado a rojo */
}

En este ejemplo de CSS, p:nth-of-type(2) seleccionaría el segundo párrafo del tipo especificado y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :nth-of-type()

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :nth-of-type()</title>
</head>
<body>
    <div>
        <p>Este es el primer párrafo de este tipo.</p>
        <p>Este es el segundo párrafo del tipo especificado que será afectado por la pseudoclase nth-of-type.</p>
        <p>Este es el tercer párrafo de este tipo.</p>
    </div>
</body>
</html>

En este ejemplo HTML, se muestran varios elementos <p> dentro de un contenedor <div>. La regla CSS p:nth-of-type(2) cambiaría el color del segundo párrafo del tipo especificado a rojo, lo que demuestra cómo se puede utilizar la pseudoclase :nth-of-type() para aplicar estilos al segundo elemento de un tipo específico entre elementos hermanos.

Nota: se aplican los mismo patrones matemáticos que para nth-child().

Pseudoclase `:only-child`

La pseudoclase :only-child en CSS se utiliza para seleccionar un elemento que es el único hijo de su elemento principal. Esto permite aplicar estilos específicos a elementos que son el único hijo de su padre. Un ejemplo de CSS que utiliza la pseudoclase :only-child sería:

Estilos CSS para la pseudoclase :only-child

/* Estilos para la pseudoclase :only-child */
p:only-child {
    color: blue; /* Cambia el color del párrafo que es el único hijo de su elemento principal a azul */
}

En este ejemplo de CSS, p:only-child seleccionaría el párrafo que es el único hijo de su elemento principal y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :only-child

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :only-child</title>
</head>
<body>
    <div>
        <p>Este es el único párrafo de su elemento principal que será afectado por la pseudoclase only-child.</p>
    </div>
    <div>
        <span>Este es el primer span.</span>
        <span>Este es el segundo span.</span>
    </div>
</body>
</html>

En este ejemplo HTML, se muestra un elemento <p> que es el único hijo de su contenedor <div>. La regla CSS p:only-child cambiaría el color del párrafo a azul, lo que demuestra cómo se puede utilizar la pseudoclase :only-child para aplicar estilos a elementos que son el único hijo de su elemento principal.

Pseudoclase `:only-of-type`

La pseudoclase :only-of-type en CSS se utiliza para seleccionar un elemento que es el único de su tipo entre los elementos hermanos de su elemento principal. Esto permite aplicar estilos específicos a elementos que son el único elemento de su tipo entre sus hermanos. Un ejemplo de CSS que utiliza la pseudoclase :only-of-type sería:

Estilos CSS para la pseudoclase :only-of-type

/* Estilos para la pseudoclase :only-of-type */
p:only-of-type {
    color: green; /* Cambia el color del párrafo que es el único de su tipo entre sus hermanos a verde */
}

En este ejemplo de CSS, p:only-of-type seleccionaría el párrafo que es el único de su tipo entre sus hermanos y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :only-of-type

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :only-of-type</title>
</head>
<body>
    <div>
        <p>Este es el único párrafo de su tipo entre sus hermanos que será afectado por la pseudoclase only-of-type.</p>
        <span>Este es un span.</span>
        <span>Este es otro span.</span>
    </div>
</body>
</html>

En este ejemplo HTML, se muestra un elemento <p> que es el único de su tipo entre sus hermanos dentro de un contenedor <div>. La regla CSS p:only-of-type cambiaría el color del párrafo a verde, lo que demuestra cómo se puede utilizar la pseudoclase :only-of-type para aplicar estilos a elementos que son el único elemento de su tipo entre sus hermanos.

Pseudoclase `:optional`

La pseudoclase :optional en CSS se utiliza para seleccionar elementos de entrada (como input, textarea o select) que no tienen el atributo required. Esto permite aplicar estilos específicos a elementos de entrada que no son obligatorios en un formulario. Un ejemplo de CSS que utiliza la pseudoclase :optional sería:

Estilos CSS para la pseudoclase :optional

/* Estilos para la pseudoclase :optional */
input:optional {
    border: 1px solid green; /* Aplica un borde de 1 píxel sólido de color verde a los campos de entrada que no son obligatorios */
}

En este ejemplo de CSS, input:optional seleccionaría los campos de entrada que no son obligatorios y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :optional

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :optional</title>
</head>
<body>
    <form>
        <input type="text" required>
        <input type="text">
        <input type="text">
        <input type="text" required>
    </form>
</body>
</html>

En este ejemplo HTML, se muestran varios campos de entrada <input> dentro de un formulario. La regla CSS input:optional aplicaría un borde de 1 píxel sólido de color verde a los campos de entrada que no son obligatorios, lo que demuestra cómo se puede utilizar la pseudoclase :optional para aplicar estilos a elementos de entrada que no son requeridos en un formulario.

Pseudoclase `:out-of-range`

La pseudoclase :out-of-range en CSS se utiliza para seleccionar elementos de entrada (como input[type="number"] o input[type="range"]) cuyos valores están fuera del rango especificado en los atributos min y max. Esto permite aplicar estilos específicos a los elementos de entrada cuyos valores están fuera del rango definido. Un ejemplo de CSS que utiliza la pseudoclase :out-of-range sería:

Estilos CSS para la pseudoclase :out-of-range

/* Estilos para la pseudoclase :out-of-range */
input:out-of-range {
    border: 1px solid red; /* Aplica un borde de 1 píxel sólido de color rojo a los campos de entrada cuyos valores están fuera del rango especificado */
}

En este ejemplo de CSS, input:out-of-range seleccionaría los campos de entrada cuyos valores están fuera del rango especificado y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :out-of-range

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :out-of-range</title>
</head>
<body>
    <form>
        <input type="number" min="0" max="100" value="120">
        <input type="range" min="0" max="100" value="120">
    </form>
</body>
</html>

En este ejemplo HTML, se muestran un campo de entrada de tipo number y un campo de entrada de tipo range dentro de un formulario. La regla CSS input:out-of-range aplicaría un borde de 1 píxel sólido de color rojo a los campos de entrada cuyos valores están fuera del rango especificado, lo que demuestra cómo se puede utilizar la pseudoclase :out-of-range para aplicar estilos a elementos de entrada cuyos valores están fuera del rango especificado.

Pseudoclase `:read-only`

La pseudoclase :read-only en CSS se utiliza para seleccionar elementos de entrada (como input o textarea) que tienen el atributo readonly especificado. Esto permite aplicar estilos específicos a elementos de entrada que no pueden ser modificados por el usuario. Un ejemplo de CSS que utiliza la pseudoclase :read-only sería:

Estilos CSS para la pseudoclase :read-only

/* Estilos para la pseudoclase :read-only */
input:read-only {
    background-color: #f2f2f2; /* Cambia el color de fondo de los campos de entrada de solo lectura a gris claro */
}

En este ejemplo de CSS, input:read-only seleccionaría los campos de entrada que tienen el atributo readonly y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :read-only

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :read-only</title>
</head>
<body>
    <form>
        <input type="text" value="Texto de solo lectura" readonly>
        <input type="text" value="Texto editable">
        <textarea readonly>Este es un área de texto de solo lectura.</textarea>
        <textarea>Esta es un área de texto editable.</textarea>
    </form>
</body>
</html>

En este ejemplo HTML, se muestran varios campos de entrada y áreas de texto dentro de un formulario, algunos de los cuales tienen el atributo readonly especificado. La regla CSS input:read-only cambiaría el color de fondo de los campos de entrada de solo lectura a gris claro, demostrando cómo se puede utilizar la pseudoclase :read-only para aplicar estilos a elementos de entrada que no pueden ser modificados por el usuario.

Pseudoclase `:required`

La pseudoclase :required en CSS se utiliza para seleccionar elementos de entrada (como input, textarea o select) que tienen el atributo required especificado. Esto permite aplicar estilos específicos a elementos de entrada que son obligatorios en un formulario. Un ejemplo de CSS que utiliza la pseudoclase :required sería:

Estilos CSS para la pseudoclase :required

/* Estilos para la pseudoclase :required */
input:required {
    border: 1px solid red; /* Aplica un borde de 1 píxel sólido de color rojo a los campos de entrada que son obligatorios */
}

En este ejemplo de CSS, input:required seleccionaría los campos de entrada que son obligatorios y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :required

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :required</title>
</head>
<body>
    <form>
        <input type="text" required>
        <input type="text">
        <select required>
            <option value="">Seleccione una opción</option>
            <option value="opcion1">Opción 1</option>
            <option value="opcion2">Opción 2</option>
        </select>
    </form>
</body>
</html>

En este ejemplo HTML, se muestran varios campos de entrada <input> y un elemento <select> dentro de un formulario, algunos de los cuales tienen el atributo required especificado. La regla CSS input:required aplicaría un borde de 1 píxel sólido de color rojo a los campos de entrada que son obligatorios, demostrando cómo se puede utilizar la pseudoclase :required para aplicar estilos a elementos de entrada que son requeridos en un formulario.

Pseudoclase `:root`

La pseudoclase :root en CSS se utiliza para seleccionar el elemento raíz de un documento HTML, que en la mayoría de los casos es el elemento html. Esto permite aplicar estilos específicos al elemento raíz del documento. Un ejemplo de CSS que utiliza la pseudoclase :root sería:

Estilos CSS para la pseudoclase :root

/* Estilos para la pseudoclase :root */
:root {
    --color-fondo: lightblue; /* Define una variable de CSS para el color de fondo */
}

/* Utiliza la variable definida en :root */
body {
    background-color: var(--color-fondo); /* Utiliza la variable para establecer el color de fondo del cuerpo */
}

En este ejemplo de CSS, :root se utiliza para definir una variable CSS --color-fondo que establece el color de fondo deseado. Luego, la variable se utiliza en la regla de estilo para el cuerpo para establecer el color de fondo del cuerpo del documento.

Aplicación HTML de la pseudoclase :root

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :root</title>
</head>
<body>
    <h1>Ejemplo de Pseudoclase :root</h1>
    <p>La pseudoclase :root se utiliza para seleccionar el elemento raíz del documento HTML.</p>
</body>
</html>

En este ejemplo HTML, se muestra cómo se puede utilizar la pseudoclase :root para definir y aplicar variables de CSS para estilizar elementos en el documento. La variable --color-fondo se utiliza para establecer el color de fondo del cuerpo del documento, lo que demuestra cómo se puede utilizar la pseudoclase :root para aplicar estilos al elemento raíz del documento. Puedes leer el artículo utilizar variables con css donde se explica detalladamente esta pseudoclase :root.

Pseudoclase `:target`

La pseudoclase :target en CSS se utiliza para seleccionar el elemento enlazado por el identificador del fragmento de URL actual. Se utiliza comúnmente para aplicar estilos específicos a un elemento cuando se dirige a él mediante un fragmento de URL. Un ejemplo de CSS que utiliza la pseudoclase :target sería:

Estilos CSS para la pseudoclase :target

/* Estilos para la pseudoclase :target */
:target {
    background-color: yellow; /* Cambia el color de fondo del elemento objetivo a amarillo */
}

En este ejemplo de CSS, :target se utiliza para cambiar el color de fondo del elemento que es el objetivo actual de la URL.

Aplicación HTML de la pseudoclase :target

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :target</title>
</head>
<body>
    <p id="seccion-1">Este es el primer párrafo de la sección 1.</p>
    <p id="seccion-2">Este es el primer párrafo de la sección 2.</p>
    <a href="#seccion-1">Ir a la sección 1</a>
    <a href="#seccion-2">Ir a la sección 2</a>
</body>
</html>

En este ejemplo HTML, se muestran dos párrafos con identificadores únicos, y también se proporcionan enlaces para navegar a cada uno de los párrafos. Cuando se hace clic en un enlace, el fondo del párrafo correspondiente cambia a amarillo debido a la pseudoclase :target, lo que demuestra cómo se puede utilizar :target para aplicar estilos específicos al elemento de destino actual en función de la URL.

Pseudoclase `:valid`

La pseudoclase :valid en CSS se utiliza para seleccionar elementos de entrada (como input o textarea) que tienen un valor válido según las reglas de validación especificadas en HTML, por ejemplo, mediante el uso de atributos como required o pattern. Esto permite aplicar estilos específicos a elementos de entrada que contienen datos válidos. Un ejemplo de CSS que utiliza la pseudoclase :valid sería:

Estilos CSS para la pseudoclase :valid

/* Estilos para la pseudoclase :valid */
input:valid {
    border: 1px solid green; /* Aplica un borde de 1 píxel sólido de color verde a los campos de entrada que contienen datos válidos */
}

En este ejemplo de CSS, input:valid seleccionaría los campos de entrada que contienen datos válidos según las reglas de validación y aplicaría los estilos correspondientes.

Aplicación HTML de la pseudoclase :valid

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Ejemplo de Pseudoclase :valid</title>
</head>
<body>
    <form>
        <input type="text" required pattern="[A-Za-z]+" title="Ingresa solo letras." placeholder="Ingresa tu nombre" />
        <input type="email" required placeholder="Ingresa tu correo electrónico" />
        <input type="submit" value="Enviar" />
    </form>
</body>
</html>

En este ejemplo HTML, se muestra un formulario con campos de entrada que utilizan los atributos required y pattern para la validación. La regla CSS input:valid aplicaría un borde de 1 píxel sólido de color verde a los campos de entrada que contienen datos válidos, lo que demuestra cómo se puede utilizar la pseudoclase :valid para aplicar estilos a elementos de entrada que contienen datos válidos según las reglas de validación.

Pseudoclase `:visited`

La pseudoclase :visited en CSS se utiliza para seleccionar y aplicar estilos a los enlaces que ya han sido visitados por el usuario. Sin embargo, debido a razones de seguridad y privacidad, los estilos aplicables a la pseudoclase :visited están limitados en muchos navegadores modernos. Generalmente, solo se pueden aplicar cambios de color y no se pueden acceder a otros estilos o propiedades.

Ejemplo de cómo usar la pseudoclase :visited en CSS

/* Estilos para la pseudoclase :visited */
a:visited {
  color: purple; /* Cambia el color de los enlaces visitados a morado */
}

En este ejemplo de CSS, a:visited se utiliza para seleccionar los enlaces que ya han sido visitados por el usuario y cambiar su color a morado.

Ejemplo HTML para aplicar la pseudoclase :visited

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <h2>Enlaces</h2>
  <p>Visita los siguientes enlaces:</p>
  <a href="https://www.ejemplo.com">Enlace 1</a>
  <a href="https://www.otroejemplo.com">Enlace 2</a>
</body>
</html>

En este ejemplo, los estilos CSS se aplicarían a los enlaces visitados que cambian su color a morado una vez que el usuario ha hecho clic en ellos. Ten en cuenta que el comportamiento y los estilos aplicables a :visited pueden estar restringidos por razones de privacidad y seguridad en muchos navegadores modernos.

Resumen sobre las pseudoclases CSS

Como hemos visto, las pseudoclases en CSS se utilizan para aplicar estilos a elementos en función de su estado o su relación con otros elementos dentro del árbol de documentos. Proporcionan una forma conveniente de aplicar estilos específicos en situaciones específicas, como cuando un enlace ha sido visitado, un elemento de entrada es válido o un elemento está enfocado, entre otros.

También podemos agrupar algunos tipos comunes de pseudoclases en CSS según su utilidad:

Pseudoclases de enlace: Se utilizan para aplicar estilos a enlaces en diferentes estados, como :link, :visited, :hover, :active y :focus.
Pseudoclases de selección de elementos específicos: Incluyen :first-child, :last-child, :nth-child, :nth-last-child, :first-of-type y :last-of-type, entre otros.
Pseudoclases de estado de formulario: Incluyen :checked, :valid, :invalid, :required, :optional, :disabled y :enabled.
Pseudoclases de interacción del usuario: Incluyen :hover, :focus y :active, que se utilizan para aplicar estilos cuando un usuario interactúa con un elemento determinado.

Es importante tener en cuenta que el soporte de algunas pseudoclases puede variar entre diferentes navegadores, por lo que siempre se debe realizar pruebas exhaustivas en varios navegadores para asegurarse de que los estilos se apliquen como se espera. Además, entender el comportamiento y la especificidad de las pseudoclases es esencial para utilizarlas de manera efectiva en el diseño y la estilización de páginas web.

Estas son la mayoría de las pseudoclases más utilizadas en CSS. Cada una de ellas se usa para aplicar estilos a elementos en función de su estado, posición o características en la página, lo que permite una personalización precisa de la apariencia de los elementos.

¡ Espero que este artículo sea de vuestro interés !

Cookie	Duración	Descripción
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Índice de pseudoclases CSS

Pseudoclase :active

Pseudoclase :checked

Pseudoclases CSS :dir()

Pseudoclase :disabled

Pseudoclase :empty

Pseudoclase :enabled

Pseudoclase :first-child

Pseudoclase :first-of-type

Pseudoclase :fullscreen

Pseudoclase :focus

Pseudoclase :hover

Pseudoclase :indeterminate

Pseudoclase :in-range

Pseudoclase :invalid

Pseudoclases CSS :lang()

Pseudoclase :last-child

Pseudoclase :last-of-type

Pseudoclase :link

Pseudoclases CSS :not()

Pseudoclases CSS :nth

Pseudoclases CSS :nth-child()