CSS id y class
En nuestro capítulo anterior, aprendimos sobre selectores. Ahora hablaremos sobre selectores id y class, que se utilizan frecuentemente para dar estilo a los elementos de una página web.
Selector id de CSS
Un selector id es un identificador único del elemento HTML al que se debe aplicar un estilo específico. Se utiliza únicamente cuando un solo elemento HTML en la página web debe tener un estilo particular.
Tanto en hojas de estilo internas como externas, utilizamos una almohadilla (#) para un selector id.
Ejemplo de un selector id:
Selector ID de CSS para elemento HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Como puedes ver, asignamos blue como el selector id del segundo párrafo (id="blue"), y declaramos su estilo utilizando la propiedad color — #blue {color: #1c87c9;} en la sección <head>. Esto significa que el elemento HTML con el selector id blue se mostrará en color #1c87c9.
Comprueba este código en nuestro editor HTML en línea para ver que el color del segundo párrafo es #1c87c9.
Selector class de CSS
Un selector class se utiliza cuando el mismo estilo debe aplicarse a múltiples elementos HTML en la misma página web.
Tanto en hojas de estilo internas como externas, utilizamos un punto (.) para un selector class.
Ejemplo de un selector class:
Ejemplo de selector class de CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>En nuestro ejemplo, un selector class se utiliza dos veces, en el encabezado y en el párrafo.
Como puedes ver, asignamos blue como el selector class (class="blue"), y declaramos su estilo utilizando la propiedad color — .blue {color: #1c87c9;} en la sección <head>. Esto significa que los elementos que tengan el selector class blue se mostrarán en color #1c87c9.
En nuestro ejemplo, el título y el tercer párrafo son #1c87c9. Compruébalo en nuestro editor HTML en línea.
La diferencia entre ID y class
La diferencia entre los IDs y las clases es que el primero es único, y el segundo no. Esto significa que cada elemento puede tener solo un ID, y cada página puede tener solo un elemento con ese ID. Al utilizar el mismo ID en múltiples elementos, el código no pasará la validación. Pero como las clases no son únicas, la misma clase puede utilizarse en múltiples elementos, y viceversa, puedes usar varias clases en un mismo elemento.
Práctica
¿Cuál es la principal diferencia entre el ID y la class en CSS?