Uso avanzado de colores y selectores¶

Veremos a continuación algunas opciones de CSS algo avanzadas, como selectores más específicos, o uso avanzado de colores con transparencias y degradados.

1. Selectores avanzados¶

Vamos a dar una vuelta más de tuerca a los selectores CSS. En un documento anterior hemos visto que fundamentalmente se utilizan cuatro tipos: de etiqueta, descendente, de clase y de id. Pero existen algunos otros que pueden sernos útiles

El selector de hijos es similar al descendente, pero aplica el estilo sólo a etiquetas que cuelguen directamente de la contenedora. Por ejemplo, para aplicar un estilo a negritas que están en párrafos (sin etiquetas intermedias), pondremos:

p > strong { ... }

El selector adyacente se utiliza para aplicar un estilo a un elemento que sea hermano adyacente de otro (es decir, a continuación de otro). Por ejemplo, para cursivas que vayan detrás de negritas (no dentro de ellas) usamos:

strong + em { ... }

Alternativamente, el selector de hermanos es menos restrictivo que el anterior: se aplica a los elementos de un tipo que vayan después de uno dado (sin que necesariamente sea inmediatamente después). Por ejemplo, este selector afecta a los párrafos que vayan después de un h1:

h1 ~ p { ... }

El selector de atributos se utiliza para aplicar el estilo a las etiquetas que tengan un atributo con un cierto valor. Ponemos la etiqueta, y luego entre corchetes el atributo y el valor que debe tener, entre comillas. Por ejemplo, si queremos aplicar un estilo a todos los enlaces que vayan a la página de la Universidad de Alicante, pondríamos algo como:

a[href="https://www.ua.es"] { ... }

Sobre este último selector existen algunas variantes interesantes, que comentamos a continuación:

a[href] a secas se aplicaría a todos los enlaces que tengan atributo href
`a[href="ua"] se aplica a los enlaces cuya URL contenga el texto ua*
`a[href^="https://"] se aplica a enlaces cuya URL comiente por https://
a[href$=".com" i] se aplica a enlaces cuya URL termine en .com, sin distinguir mayúsculas o minúsculas (la i permite esto último).
`a[class~="btn"] se aplica si el elemento tiene una lista de valores en class, y uno de ellos es btn

Ejercicio 1

Dado el siguiente contenido HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Noticias UA</title>
</head>
<body>
    <h1>Noticias de la Universidad de Alicante</h1>

    <p>Consulta nuestras últimas publicaciones sobre ciencia y tecnología.</p>

    <section class="noticia">
        <h2>Investigación en Energías Renovables</h2>
        <p>La Universidad de Alicante lidera un nuevo proyecto europeo.</p>
        <strong>Importante:</strong> <em>El proyecto comenzará en enero de 2026.</em>
        <p>Más información en <a href="https://www.ua.es">la web oficial</a>.</p>
    </section>

    <section class="noticia destacada">
        <h2>Conferencia sobre IA</h2>
        <p>El evento contará con ponentes internacionales.</p>
        <strong>Atención:</strong> <em>Las plazas son limitadas.</em>
        <p>Inscríbete en <a href="https://eventos.ua.es/ia2025" class="btn registro">este enlace</a>.</p>
    </section>

    <p>Visita también <a href="https://www.universidades.com">otros portales educativos</a>.</p>

</body>
</html>

Aplica un color azul solo a los <strong> que estén directamente dentro de un <section>.
Haz que el <em> que venga inmediatamente después de un <strong> se muestre en cursiva y en color rojo.
Cambia el color de los párrafos que vengan después de un <h1> a gris oscuro.
Los enlaces que empiecen por https://www.ua.es deben tener color verde.
Los enlaces que terminen en .com deben tener color morado.

1.1. Las pseudoclases¶

Ya hemos visto anteriormente que en algunos selectores podemos emplear pseudoclases para concretar un estado particular del elemento. Se identifican con el prefijo :; así, el selector a:hover se aplica a los enlaces cuando estamos pasando el ratón por encima de ellos. Existen otras pseudo-clases que podemos aplicar en diferentes elementos para referirnos a estados o subelementos concretos. Vamos a verlas a continuación agrupadas por categorías.

1.1.1. Pseudoclases de enlaces¶

Aunque ya las hemos visto en algún documento anterior, podemos emplear las siguientes pseudoclases para referirnos al estado de los enlaces de un documento:

:link: para enlaces aún no visitados
:visited: para enlaces ya visitados

La siguiente regla define el color de texto para enlaces no visitados:

a:link
{
    color: red;
}

1.1.2. Pseudoclases de ratón¶

Según el movimiento del ratón en la página, podemos definir estas pseudoclases:

:hover: el ratón pasa por encima del elemento indicado (enlace, párrafo, etc)
:active: hacemos clic con el ratón encima del elemento indicado

Esta regla pone el color de fondo de los párrafos a amarillo cuando hacemos clic sobre ellos:

p:active
{
    background-color: yellow;
}

1.1.3. Pseudoclases de formularios¶

Algunas pseudoclases se aplican sobre estados o controles de formularios:

:focus: se aplica sobre el elemento que tiene el foco
:checked: se aplica sobre casillas de checkbox cuando se marcan. También se aplica sobre botones de radio cuando se elige esa opción, y sobre listas.
:enabled: se aplica sobre los elementos activados
:disabled: se aplica sobre elementos desactivados (sobre los que el usuario no puede interactuar)
:read-only: para elementos marcados como de sólo lectura

La siguiente regla pone el borde de color verde sobre el elemento que tenga el foco

input:focus
{
    border: 1px solid green;
}

También existen pseudoclases específicas para la validación de los campos:

:required: para elementos que sea obligatorio rellenar
:optional: para elementos que no sea obligatorio rellenar (es decir, no tienen el atributo required)
:invalid: cuando el elemento no cumple las reglas de validación que se le aplican
:valid: cuando el elemento cumple las reglas de validación
:out-of-range: cuando el valor del elemento excede del límite que se le ha aplicado (valores numéricos fuera de rango)
:in-range: para valores numéricos dentro del rango

Esta regla pone el borde rojo en los campos que no sean válidos:

input:invalid
{
    border: 1px solid red;
}

1.1.4. Pseudoclases para selección por condiciones¶

Veremos a continuación algunas pseudoclases que nos pueden servir para aplicar estilos a elementos dependiendo del tipo que sean.

:not: se aplica a los elementos que no cumplan la condición indicada. Por ejemplo, para expresar que nos referimos a divs que no sean de clase principal, pondríamos div:not(.principal).
:has: selecciona el elemento si sus hijos cumplen una serie de criterios. Por ejemplo, esta regla se aplica sobre el enlace sólo si contiene una imagen como hijo directo:

a:has(>img) { ... }

:is: recibe como argumentos una lista de selectores, y aplica los estilos a cualquier elemento que encaje con uno de esos selectores.
:where también recibe como argumentos una lista de selectores y aplica los estilos a cualquier elemento que encaje con uno de ellos. Puede parecer idéntica a :is, pero se diferencian en la especificidad: mientras que is respeta la especifidad de cada selector, where las iguala todas.

Para entender mejor la diferencia entre estas dos pseudoclases veamos este ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo :is vs :where</title>
  <style>
    /* RESET con :where -> especificidad 0 */
    :where(h1, h2, h3) {
      margin: 0;
      color: gray;
    }

    /* Estilo con :is -> mantiene especificidad */
    article :is(h1, h2, h3) {
      color: darkblue;
    }

    /* Una regla de clase normal */
    .especial {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Título fuera de article</h1>

  <article>
    <h2>Subtítulo dentro de article</h2>
    <h2 class="especial">Subtítulo dentro de article con clase</h2>
  </article>
</body>
</html>

Al aplicar la regla where, todos los encabezados se ponen a color gris sin margen (es una especie de reseteo). Luego, sobre el primer encabezado h2 del artículo se aplica el is, y lo pone de color azul oscuro (manteniendo el margen 0 dejado por where). Finalmente, sobre el segundo encabezado del artículo se aplica la regla de selector especial, al ser más específica, dejándolo de color rojo (y con el margen 0 del reseteo de where).

Como vemos, la cláusula where es útil para resetear a valores por defecto, y luego con is o selectores de clase específicos podemos afinar mejor el estilo de ciertos elementos concretos.

1.1.5. Pseudoclases para selección por DOM¶

También disponemos de varias pseudoclases para elegir elementos según la posición que ocupan en la jerarquía del documento (DOM, Document Object Model):

:first-child: para aplicar un estilo a la primera etiqueta de la que estamos tratando. Por ejemplo, div > p:first-child sólo se aplicará a los párrafos que sean los primeros hijos de un div.
:first-of-type: para identificar el primer elemento que sea de un tipo dentro de una secuencia. Por ejemplo, div > p:first-of-type se aplicará al primer párrafo de un div, aunque haya otras cosas antes.
:nth-child(x): podemos indicar estilos concretos para elementos concretos de una secuencia. Por ejemplo, li:nth-child(even) aplica los estilos a los items pares de una secuencia, y li:nth-child(odd) aplicaría a los impares. El selector li:nth-child(4) aplica el estilo al cuarto item en la lista, y el selector li:nth-child(4n) lo aplica cada cuatro elementos.
:last-child, :last-of-type, nth-of-type(x), nth-last-child(x) y nth-last-of-type(x) se usan de forma análoga a las anteriores, para empezar a revisar desde el final (últimos elementos).

Podéis aprender más sobre pseudo-clases y sus usos en webs como ésta.

Ejercicio 2

Dado el siguiente contenido HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prueba</title>
</head>
<body>
    <section id="inicio">
        <h2>Inicio</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, aliquam!</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    </section>
    <section id="contenido">
        <h2>Contenido</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, aliquam!</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    </section>
    <section id="fin">
        <h2>Fin</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, aliquam!</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
    </section>
    <section id="tabla">
        <table>
            <tr>
                <td>Lorem, ipsum dolor.</td>
                <td>Ab, deserunt officia!</td>
                <td>Amet, temporibus molestiae.</td>
                <td>Facere, corrupti praesentium?</td>
            </tr>
            <tr>
                <td>Lorem, ipsum dolor.</td>
                <td>Similique, voluptates suscipit!</td>
                <td>Commodi, asperiores sunt?</td>
                <td>Veniam, voluptatibus unde.</td>
            </tr>
            <tr>
                <td>Lorem, ipsum dolor.</td>
                <td>Soluta, perferendis fuga.</td>
                <td>At, similique sunt?</td>
                <td>Asperiores, unde atque?</td>
            </tr>
            <tr>
                <td>Lorem, ipsum dolor.</td>
                <td>Corrupti, saepe quo.</td>
                <td>Voluptates, tempore eius!</td>
                <td>Consequatur, laboriosam vero?</td>
            </tr>
            <tr>
                <td>Lorem, ipsum dolor.</td>
                <td>Officiis, illum dolorem.</td>
                <td>Obcaecati, alias qui!</td>
                <td>Necessitatibus, sunt deserunt.</td>
            </tr>
        </table>
    </section>
</body>
</html>

Queremos que las filas pares de la tabla se muestren con un fondo gris, y que el primer párrafo de cada sección tenga letra cursiva. Además, queremos que la tabla ocupe el 100% del ancho disponible, con un borde negro de 1 píxel de grosor y colapsado. Indica qué reglas CSS deberíamos aplicar para conseguirlo.

1.2. Pseudoelementos¶

Los pseudoelementos hacen referencia a elementos que realmente no existen como tales en la página, pero a los que se puede referenciar desde CSS. Por ejemplo, la primera letra de una palabra, o la primera línea de un párrafo. Estos pseudoelementos se representan con el prefijo ::. Aquí nombramos los más importantes o habituales:

::before y ::after: permiten insertar código antes o después del contenido real de un elemento, respectivamente. Por ejemplo, de este modo añadiríamos el texto --- antes del contenido de un encabezado 1 de clase titulo.

h1.titulo::before
{
    content: "---";
    color: black; /* Color del texto añadido */
}

::first-letter y ::first-line hacen referencia a la primera letra o primera línea, respectivamente, del elemento aludido. Por ejemplo, esta regla pone de color rojo la primera línea de los párrafos.

p::first-line
{
    color: red;
}

1.3. Combinando selectores¶

Los selectores y opciones vistos antes se pueden combinar de varias formas, creando en ocasiones estructuras algo complejas de identificar. En cualquier caso, el orden que debemos aplicar siempre es el siguiente:

selector#id.clase:pseudoclase::pseudoelemento[atributo] { ... }

Ejercicio 3

Dado el siguiente contenido HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Registro al evento</title>
</head>
<body>
    <main>
        <h1>Inscripción al evento</h1>
        <form class="form-registro" action="pagina.php">
            <fieldset>
                <legend>Datos personales</legend>
                <label>
                    Nombre completo
                    <input type="text" name="nombre" placeholder="Tu nombre" required>
                </label>
                <label>
                    Correo electrónico
                    <input type="email" name="email" placeholder="tucorreo@dominio.com" required>
                </label>
                <label>
                    Contraseña (mín. 8, 1 número)
                    <input type="password" name="pass"
                        pattern="(?=.*\d).{8,}" required
                        placeholder="••••••••">
                </label>
                <label>
                    Edad (18–120)
                    <input type="number" name="edad" min="18" max="120" required>
                </label>
                <label>
                    Sitio web (opcional)
                    <input type="url" name="web" placeholder="https://...">
                </label>
            </fieldset>
            <fieldset>
                <legend>Comentarios</legend>
                <textarea name="comentarios" rows="4" placeholder="Observaciones..."></textarea>
            </fieldset>
            <label class="acepto">
                <input type="checkbox" name="legal" required>
                Acepto las condiciones
            </label>
            <button type="submit" class="btn">Enviar inscripción</button>
        </form>
    </main>
</body>
</html>

Aplica un reseteo suave con where a todo el contenido de la página, para no poner márgenes ni padding, y definir un tipo de letra system-ui, o sans-serif en su defecto.
Usa también where para definir un margen lateral del 10% al main.
Usa is para aplicar a todos los inputs de texto (no a los checkbox ni botones de radio), áreas de texto o desplegables el mismo estilo general: anchura del 100%, padding de 10px, borde gris sólido de 1 píxel, radio de 10px y fondo blanco.
Resalta con :focus los campos anteriores activos con otro borde y color de fondo
Marca con borde rojo los campos que no sean válidos (:invalid) y con verde los que sí (:valid)
Usa :required para marcar con un asterisco visual mediante ::before en las label que contengan un control obligatorio
Si no se marca "Acepto las condiciones", el botón de enviar debe verse desactivado (opacidad y pointer-events: none) usando form:has(input[name="legal"]:invalid) .btn { ... }
Aplica un estilo general a los label excepto a los que tengan la clase .acepto, usando :not.

Este es el aspecto general final del formulario:

2. Uso avanzado de colores¶

Como ya hemos visto anteriormente, hasta CSS2 teníamos básicamente tres formas de especificar el color de un elemento en una página: con un nombre de color simple (red, yellow...), con su código de colores en RGB decimal (tres cifras de 0 a 255 para cada componente rojo, verde y azul, por ejemplo: rgb (12, 116, 52)), y con su código de colores RGB en hexadecimal (siguiendo la misma filosofía del anterior, pero con formato hexadecimal, por ejemplo: #FF2E34).

CSS3 incorpora novedades interesantes en este conjunto de formatos de color, como es la inclusión del nivel de transparencia u opacidad de un elemento, o el uso de degradados.

2.1. Transparencia¶

Con CSS3 podemos definir el grado de transparencia u opacidad que va a tener el color de un elemento (tanto color de texto como color de fondo), añadiendo un cuarto elemento a los tres colores RGB, pasando a ser un formato (la A viene de alpha, nombre con el que suele hacerse referencia a la transparencia).

Este cuarto elemento es un número decimal que va desde el 0 (totalmente transparente) hasta el 1 (totalmente opaco). Si decidimos usar la transparencia, entonces deberemos especificar el color usando la función rgba de esta forma:

h1
{ 
    background-color: rgba(12, 116, 52, 0.5); 
}

donde los tres primeros números expresan la cantidad de rojo, verde y azul, como antes, y el cuarto número es la transparencia.

Una alternativa diferente es utilizar la propiedad opacity en el CSS, con valores también entre 0 y 1:

p 
{ 
    background-color: rgb(12, 116, 52); 
    opacity: 0.5; 
}

La diferencia con lo anterior es que, usando opacity, la opacidad afecta al elemento y a todos los subelementos que contenga, incluyendo el texto (que podría ser entonces parcialmente transparente sin nosotros quererlo).

2.2. Degradados¶

Un degradado es una transición progresiva desde un color a otro. En el caso de CSS, existen tres tipos de degradados: lineales, radiales y cónicos.

2.2.1. Degradados lineales¶

Un degradado lineal es un efecto por el que pasamos gradualmente de un color a otro, siguiendo un eje horizontal, vertical o en cualquier otra dirección. Con CSS3 podemos conseguir este efecto con la función linear-gradient. Entre paréntesis (sin dejar espacio antes del paréntesis), indicaremos ciertos valores:

La dirección del degradado, que podemos indicarla de tres formas distintas:
Indicando hacia qué lado ir: to top, to bottom, to left o to right
Indicando desde qué extremo partir: top left, top right, bottom left o bottom right
Indicando un ángulo en grados (deg), donde 0deg apunta hacia arriba y 90deg hacia la derecha.
Por defecto, si no se indica, es de arriba a abajo.
Dos o más colores (separados por comas), que serán los colores hacia los que se va a ir cambiando gradualmente (de uno al siguiente). Junto a cada color, se puede indicar un porcentaje, que expresa en qué punto del recorrido se tendrá ese color

Por ejemplo, el siguiente degradado va hacia la derecha, parte del blanco, pasa por un rojo a mitad de camino, y termina en un negro.

div 
{ 
    background-image: linear-gradient(90deg, #FFFFFF, #FF0000 50%, #000000); 
}

Obtendríamos este resultado:

Existen otras muchas variantes de uso de degradados lineales, y algunas incompatibilidades con algunos formatos dependiendo del navegador, pero este ejemplo nos puede servir de muestra de lo que se puede hacer.

2.2.2. Degradados radiales¶

Un degradado radial es otro tipo de degradado donde se pasa de un color en un punto concreto de un determinado elemento (por defecto, el centro del mismo) y se va cambiando gradualmente hacia otro color, en todas direcciones a partir de ese punto. Este degradado se obtiene con la función radial-gradient.

El siguiente ejemplo crea un degradado radial de forma circular hasta el lado más cercano, y pasa del negro al blanco.

div 
{ 
    background-image: radial-gradient(circle closest-side, black, white);
}

y obtendríamos algo como esto:

Si lo aplicamos al lado más lejano (farthest-side), obtenemos esto otro:

Algunos parámetros útiles de configuración:

La forma del degradado puede ser circular (circle) o elíptica (ellipse, valor por defecto). Se puede especificar también un tamaño en píxeles.
El punto de finalización puede ser el lado más cercano (closest-side), el más lejano (farthest-side) y también el extremo más cercano (closest-corner) o más lejano (farthest-corner, valor por defecto).
También podemos indicar el punto inicial de aplicación, con la palabra at seguido del punto de anclaje elegido (center, top, bottom right...)
Después vienen los colores a utilizar, indicando opcionalmente en cada uno el porcentaje o punto donde aplicarlo.

Otros ejemplos:

/* Gradiente elíptico */
background-image: radial-gradient(ellipse, gold 50%, red 55%, black 75%);

/* Gradiente circular de 400px anclado a la izquierda */
background-image: radial-gradient(circle 400px at left, gold 50%, red 55%, black 75%);

2.2.3. Gradientes cónicos¶

Los gradientes cónicos son similares a los radiales, y provocan un degradado en forma de cono visto desde arriba. Para indicar desde dónde aplicar el degradado usaremos la palabra from seguida de un ángulo en grados, que indica desde qué dirección empiezan a cambiarse los colores (por defecto 0º, que corresponde con el sentido hacia arriba). A partir de ahí, los colores se distribuyen en sentido horario. Luego indicamos dónde queremos colocar el centro del gradiente (usando at) y los colores implicados. Aquí vemos algunos ejemplos:

background-image: conic-gradient(from 45deg, blue, red);

Podemos emplear la función repeating-conic-gradient para repetir sucesivamente la secuencia indicada:

background-image: repeating-conic-gradient(blue 10%, yellow 20%, red 30%);

2.3. Otros modelos de color¶

Además del modelo RGB (o RGBA, en el caso de añadir el canal de transparencia), en versiones recientes de CSS se han añadido otras formas de definir el color de los elementos.

2.3.1. Modelo HSL¶

El modelo HSL (Hue, Saturation, Lightness, o Tono, Saturación y Brillo) es otro modelo que define los colores en base a otros parámetros diferentes, que resultan a menudo más intuitivos a la hora de crear colores o paletas de colores.

Se define usando la función hsl de CSS, donde podemos emplear tres parámetros:

Su tono (H), que define el tipo de color que usaremos (tono rojo, verde...). Toma valores en torno a una cirfunferencia de 0 a 360º, donde el 0 es el tono rojo, 120 verde y 240 azul, y en medio van todas las tonalidades intermedias entre estos tres colores.
La saturación (S), que define cuánta cantidad de ese color queremos. Toma un valor porcentual de 0 a 100% (o de 0 a 1), siendo 0 un tono gris (sin color) y 100 el color vivo y puro.
La luminosidad (L) del color elegido. También toma un valor porcentual, siendo 0 ninguna luminosidad (negro) y 100 toda la luminosidad (blanco)
Adicionalmente, se le puede añadir también una transparencia (canal alpha), empleando en este caso la función hsla en lugar de la anterior.

Veamos algunos ejemplos:

/* Azul intenso */
color: hsl(200, 100%, 50%)
/* Rosa claro */
color: hsl(0, 100%, 75%)
/* Verde translúcido */
color: hsla(120, 100%, 50%, 0.3)

2.3.2. Otras funciones modernas¶

Existen también otras funciones modernas en CSS que definen el color en base a ciertos parámetros. Su principal utilidad radica en poder definir el color de una forma más sencilla, o de una forma más exacta con el color real, ya que, a menudo, el color que vemos en un dispositivo, o en la vida real, no coincide exactamente con el que estamos plasmando en nuestro CSS al crear una página similar.

La función hwb (hue, whiteness, blackness), define el color en base al tono (entre 0 y 360, similar a HSL), el nivel de claridad (porcentaje) y el de oscuridad (otro porcentaje). También podemos indicar un nivel de transparencia tras el símbolo /. Los valores se representan separados por espacios.

/* Rojo puro (sin blancos ni negros) */
color: hwb(0 0% 0%);

/* Rosa pálido (algo de blanco) */
color: hwb(0 30% 0%);

/* Azul marino translúcido */
color: hwb(240 0% 60% / 0.5);

/* Gris (cualquier color con 50% de blanco y 50% de negro) */
color: hwb(200 50% 50%);

Las funciones lab y lch se refieren al espacio de color perceptual. LCA define la luminosidad (L, porcentual), el nivel de rojo-verde (A, negativo hacia verde, positivo hacia rojo), y el nivel de azul-amarillo (B, negativo hacia azul, positivo hacia amarillo). En el caso de LCH, la L sigue siendo la luminosidad, la C es el chroma (saturación, de 0 en adelante) y la H el tono, siendo similar entonces al modelo HSL (aunque perceptualmente uniforme). En ambos casos se puede añadir un componente de transparencia.

/* Rojo-amarillento medio */
color: lab(50% 80 70);
/* Naranja vivo medio */
color: lch(50% 80 40);

Posteriormente surgieron las funciones oklab y oklch que mejoran la precisión perceptual de las anteriores, y son más adecuadas para pantallas modernas.
Finalmente, la función color permite mostrar colores en espacios diferentes al sRGB tradicional de la web. Esto es útil también para pantallas recientes, como monitores HDR, que son capaces de mostrar más colores de los que permite sRGB. En la sintaxis general debemos indicar el modelo de color a usar (por ejemplo, srgb, display-p3, a98-rgb...), los canales configurados y, opcionalmente, el nivel de transparencia.

/* Rojo puro en sRGB */
color: color(srgb 1 0 0);

/* Rojo puro en Display-P3 */
color: color(display-p3 1 0 0);

/* Verde translúcido en Rec.2020 */
color: color(rec2020 0 1 0 / 0.5);

Ejercicio 4

Dado el siguiente contenido HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Laboratorio de color CSS</title>
</head>
<body>
    <main>
        <h1>Laboratorio de Color CSS</h1>

        <section class="bloque transparencia">
            <h2>Transparencias</h2>
            <div class="cuadro opacidad">Texto de prueba dentro del cuadro</div>
            <div class="cuadro rgba">Texto de prueba dentro del cuadro</div>
            <p>Ambos cuadros usan el mismo color base, pero la forma de aplicar la transparencia es distinta.</p>
        </section>

        <section class="bloque gradientes">
            <h2>Degradados</h2>
            <div class="cuadro gradiente-lineal"></div>
            <div class="cuadro gradiente-radial"></div>
            <p>Observa la diferencia entre un degradado lineal (izquierda) y radial (derecha).</p>
        </section>

        <section class="bloque modelos">
            <h2>Modelos de color</h2>
            <div class="modelo rgb">RGB</div>
            <div class="modelo hsl">HSL</div>
            <div class="modelo hwb">HWB</div>
            <div class="modelo lch">LCH</div>
            <p>Todas estas cajas representan un color aparentemente similar (rojo coral),
                pero definido en distintos espacios de color.</p>
        </section>
    </main>
</body>
</html>

Define un color beige en el body
En la sección de Transparencias, crea un fondo azul con rgb(30, 100, 200) y aplica transparencia de dos maneras: en .opacidad con opacity: 0.5 y en .rgba con background-color: rgba(30, 100, 200, 0.5). Compara cómo afecta la transparencia a ambos cuadros.
En la sección de Degradados usa un gradiente lineal en .gradiente-lineal para pasar en horizontal de rojo a naranja y amarillo, y uno radial en . gradiente-radial para pasar en círculo por esos colores. Da a las dos cajas el mismo tamaño.
En la sección de Modelos de color vamos a definir el mismo color "rojo coral" usando distintos modelos de color: rgb(255, 80, 80) para RGB, hsl(0, 100%, 65%) para HSL, hwb(0 0% 10%) para HWB y lch(65% 85 25).
Añade una pequeña sombra (box-shadow) a cada cuadro para contrastar mejor los colores.

Aquí tienes una muestra de cómo puede quedarte:

3. Introducción al nesting¶

El nesting (anidamiento) es una propiedad relativamente reciente en CSS que permite anidar selectores dentro de otros, de modo que los estilos del selector anidado se aplican a subelementos del selector padre. Por ejemplo, en la siguiente regla:

section
{
    margin: 10px 20%;
    p
    {
        font-family: Arial;
    }
}

Estamos indicando que todas las secciones tienen el margen indicado, y los párrafos que estén dentro de ellas tienen letra Arial. Sería equivalente a escribir esto en versiones anteriores de CSS:

section
{
    margin: 10px 20%;
}
section p
{
    font-family: Arial;
}

Esto permitirá escribir reglas de forma más jerárquica y abreviada, cosa que hasta hace poco sólo era posible con preprocesadores de CSS como Sass o Less.

3.1. El selector de anidamiento¶

Relacionado con esta propiedad de anidamiento tenemos el selector &, que hace referencia al elemento padre sobre el que estamos anidando nuevas reglas. Por ejemplo:

img
{
    width: 200px;
    &:hover
    {
        border: 1px solid red;
    }
}

El selector & hace referencia al selector img donde está anidado, y de este modo indicamos que, cuando pase el ratón por encima de las imágenes, se les pondrá un borde rojo de 1 píxel.

Iremos profundizando más sobre el anidamiento y distintos usos del selector & en sucesivas secciones.