Por identificador

<< Selectores I Por clase >>

Hemos visto la forma más básica de seleccionar elementos en CSS utilizando como selector la etiqueta a la que le queremos aplicar el estilo. En el tema pasado, vimos que todas las etiquetas HTML pueden tener un atributo id, ese valor va a ser un valor único y por tanto no podremos encontrar dentro de nuestro HTML dos etiquetas con el mismo valor id (el id actúa como nuestro DNI, no podemos encontrar dos personas con el mismo DNI).

<!DOCTYPE html>
<html lang="es">
     <head>
          <meta charset="UTF-8">
          <title>Aplicando estilos</title>
          <link rel="stylesheet" href="style.css">
     </head>
     <body>
          <div id="header">
               <h1>El título de mi web</h1>
          </div>
          <div id="container">
               <p>Primer párrafo de mi web</p>
               <p>Este es otro párrafo</p>
          </div>
</body>
</html>

En el ejemplo anterior, tenemos dos elementos <div> cada uno con un id diferente, el primero de ellos tiene el valor header, y el segundo container. No podríamos poner otro <div> dentro de nuestro HTML con uno de esos dos valores ya que ya hay una etiqueta con ese valor.

En el anterior ejemplo, estamos dando un estilo accediendo con el selector id. Para ello utilizamos el símbolo #, es decir, estamos dándole el color rojo al texto que contenga el atributo: id="header".

A día de hoy no se suelen utilizar muchos ids (desde HTML5), pero son atributos válidos que se emplean para designar una zona que sabemos que no se va a repetir e identificarla como única. Si al código anterior HTML, le aplicamos el siguiente estilo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo selectores</title>
    <link rel="stylesheet" href="selectores.css">
</head>
<body>
    <header>
        <h1 id="header">El título de mi web</h1>
    </header>
    <main>
        <article>
            <h1>Título de mi artículo</h1>
            <p>Primer párrafo de mi web</p>
            <p>Este es otro párrafo</p>
        </article>
    </main>
</body>
</html>

<< Selectores I Por clase >>