Selector de ID

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 13 de 76.

El selector de ID se utiliza para seleccionar un elemento HTML específico basándose en el valor de su atributo id. A diferencia de los selectores de clase, que pueden utilizarse para dar estilo a múltiples elementos, los selectores de ID son únicos y solo pueden aplicarse a un único elemento en una página. Esto los hace útiles para dar estilo a elementos individuales con estilos específicos que no deberían aplicarse a ningún otro elemento.

Para seleccionar un elemento con un ID específico en tu CSS, utilizas un símbolo de almohadilla (#) seguido del valor del ID. Aquí tienes la sintaxis básica para usar un selector de ID:

#idname {
    property: value;
}

Por ejemplo:

#intro {
    color: blue;
    font-size: 20px;
}

En este ejemplo, el selector de ID #intro apunta al elemento con el ID "intro". Las declaraciones establecen el color del texto en azul y el tamaño de fuente en 20 píxeles para este elemento.

Desafío

Fácil

Se te proporciona un documento HTML con varios elementos, incluyendo un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Tu tarea es usar un selector de ID para dar estilo a un elemento de división. Sigue los pasos a continuación:

Agrega un atributo id con el valor "special" al elemento <div>.
Escribe una regla CSS usando un selector de ID que apunte al elemento con el ID "special". Establece el color de fondo de este elemento a yellow y el color del texto a red.

Hoja de referencia

El selector de ID apunta a un elemento HTML específico usando su atributo id. Los selectores de ID son únicos y solo se pueden aplicar a un único elemento en una página.

Usa un símbolo de almohadilla (#) seguido del valor del ID:

#idname {
    property: value;
}

Ejemplo:

#intro {
    color: blue;
    font-size: 20px;
}

Pruébalo tú mismo

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>