Selección de elementos por id único en CSS
Como ya sabes, las clases están diseñadas
para asignarlas a un grupo de elementos. Además
de las clases, también se pueden seleccionar elementos por
id, que representa un identificador
único del elemento. La unicidad
significa que si en nuestra página
ya existe un elemento con ese id, no debe haber otro
elemento con el mismo id.
El identificador único se establece mediante
el atributo id, en el que se escribe el nombre
que inventemos. Por ejemplo, hagamos dos
bloques. Al primero le asignemos un id con el valor
block1, y al segundo - con el valor
block2:
<div id="block1">
<p>text</p>
<p>text</p>
</div>
<div id="block2">
<p>text</p>
<p>text</p>
</div>
Para dirigirse a un elemento con un id determinado,
hay que escribir el símbolo # y el nombre
que hemos inventado, así:
#block1 {
color: red;
}
#block2 {
color: green;
}
El atributo id se utiliza en el caso
en que es necesario enfatizar la unicidad
del elemento. Las clases se usan cuando
se supone que puede haber muchos elementos de ese tipo,
incluso si ahora solo hay uno.
Se da el siguiente código:
<div id="elem1">
<h2>Título</h2>
<p>
texto
</p>
<p>
texto
</p>
</div>
<div id="elem2">
<h2>Título</h2>
<p>
texto
</p>
<p>
texto
</p>
</div>
<div id="elem3">
<h2>Título</h2>
<p>
texto
</p>
<p>
texto
</p>
</div>
Pinta el contenido del bloque elem1 en
color rojo, del bloque elem2 - en verde,
y del bloque elem3 - en azul claro.
