Todo lo que necesitas saber sobre ID en CSS

Los elementos HTML se pueden definir por tipo, clase, atributo, pseudoestado o nombre de identificador. La forma en que los defines afecta la forma en que los personalizas con los selectores de CSS.

Por ejemplo, si desea realizar cambios generales en su sitio, puede utilizar el selector de tipo. Supongamos que desea diseñar cada espacio en su sitio. Entonces usarás el selector de tipo span {propiedades de estilo}.

Para realizar cambios más detallados, necesita un selector más específico. El selector de identificadores es el más detallado. Echemos un vistazo más de cerca a este tipo de selector a continuación.

Aquí hay un vistazo a la sintaxis del selector de ID en CSS:

 
#idname { style properties }

Hay algunas reglas a seguir para usar el selector de ID de CSS correctamente. Antes de ver estos principios a continuación, consideremos los siguientes ejemplos.

yo tambien lo usare CDN de arranque para cargar la hoja de estilo Bootstrap predeterminada para mantener los ejemplos con el estilo apropiado. Sin embargo, el HTML y CSS de los ejemplos también funcionarán en sitios HTML5. Entonces, si está creando su sitio desde cero en lugar de usar Bootstrap CSS, aún puede usar HTML y CSS como plantillas.

Cómo usar una identificación en CSS

La primera regla a tener en cuenta al usar el atributo ID es que debe contener al menos un carácter y no puede comenzar con un dígito.

Digamos que tengo muchos h2 en mi sitio y cada uno de ellos marca el comienzo de un nuevo capítulo. Entonces puedo darle a cada h2 un nombre de identificación.

El siguiente código HTML es válido:

 
<h2 id="C1">Chapter 1</h2>
<h2 id="C2">Chapter 2</h2>
<h2 id="C3">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

Esto es incorrecto:

 
<h2 id="1">Chapter 1</h2>
<h2 id="2">Chapter 2</h2>
<h2 id="3">Chapter 3</h2>
<h2 id="4">Chapter 4</h2>

La segunda regla a tener en cuenta es que si un elemento tiene un nombre identificador, debe ser único en la página. Por lo tanto, el selector de identificadores selecciona solo un elemento único.

Volviendo al ejemplo de muchos h2, digamos que quiero que cada uno de estos h2 tenga un estilo diferente para indicar visualmente al lector cuándo comienza un nuevo capítulo. En ese caso, le daría a cada h2 un nombre de identificador único para poder usar selectores de identificador para aplicar a cada conjunto único de valores de propiedad.

El siguiente código HTML es válido:

 
<h2 id="C1">Chapter 1</h2>
<h2 id="C2">Chapter 2</h2>
<h2 id="C3">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

Esto es incorrecto:

 
<h2 id="C4">Chapter 1</h2>
<h2 id="C4">Chapter 2</h2>
<h2 id="C4">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

El siguiente CSS cambiaría el tamaño de fuente de cada h2:

 
#C1 {
  font-size: 18px;
}
#C2 {
  font-size: 20px;
}
#C3 {
  font-size: 22px;
}
#C4 {
  font-size: 24px;
}

Aquí está el resultado:

ver la pluma mdWVXKM de Christina Perricone (@hubspot) en CódigoPen.

La última regla a tener en cuenta al usar selectores de ID es que el valor de la propiedad del selector de ID debe coincidir exactamente con el nombre de ID.

Usando el HTML del ejemplo anterior, el siguiente CSS sería correcto.

 
#C1 {
  font-size: 18px;
}
#C2 {
  font-size: 20px;
}
#C3 {
  font-size: 22px;
}
#C4 {
  font-size: 24px;
}

Sería incorrecto:

 
#c1 {
  font-size: 18px;
}
#c2 {
  font-size: 20px;
}
#c3 {
  font-size: 22px;
}
#c4 {
  font-size: 24px;
}

Si tuviera que usar este CSS con una «c» minúscula, los selectores de ID de CSS y sus reglas de CSS correspondientes no se aplicarían. En cambio, el estilo h2 predeterminado en Bootstrap se mostraría como se muestra a continuación.

ver la pluma ¿Cómo NO usar la ID de CSS? [Example] de Christina Perricone (@hubspot) en CódigoPen.

Cubrimos las reglas para usar el selector de ID en CSS. Ahora apliquémoslos usando el selector de ID para estilizar las imágenes.

ID de imagen CSS

Puede usar el selector de ID en encabezados o imágenes, botones y otros elementos HTML.

Suponga que desea diseñar una imagen específica en su sitio. Tal vez quieras que tenga una forma y una opacidad diferentes a las otras imágenes de esta página. En este caso, puede utilizar el selector de ID.

Primero, agregue un atributo de ID a la imagen. Este atributo ID puede aparecer en cualquier parte del elemento de imagen: antes del atributo img src, después del atributo src, pero antes del atributo alt, después de los atributos img src y alt.

En el siguiente ejemplo, pondré el ID «redondo» delante de los atributos src y alt en el segundo elemento de la imagen. A continuación, usaré el selector de ID para estilizar esta imagen para que sea circular y 70 % opaca.

Aquí está el código HTML:

 
<img src="https://source.unsplash.com/fk4tiMlDFF0/300x200/" alt="tiniest puppy">
<img id="round" src="https://source.unsplash.com/TzjMd7i5WQI/300x200/" alt="tiny puppy">
<img src="https://source.unsplash.com/-Go4DH2pZbc/300x200/" alt="least tiny but still tiny puppy">

Aquí está el CSS:

 
#round {
  border-radius: 50%;
  opacity: 0.7;
}

Aquí está el resultado:

ver la pluma ID de imagen CSS de Christina Perricone (@hubspot) en CódigoPen.

Ahora que entendemos qué es un selector de id y cómo usarlo en CSS, asegurémonos de entender la diferencia entre una clase y una id en CSS.

Otra diferencia clave entre un selector de clase y un selector de identificador es la especificidad. Los selectores de CSS tienen diferentes niveles de granularidad, por lo que si varios selectores apuntan a un elemento HTML, el navegador aplicará la regla del selector de CSS con la mayor granularidad.

Al comparar selectores de clase con selectores de ID, los selectores de ID tienen mayor detalle y, por lo tanto, son más eficientes. (De hecho, los selectores de ID son tan poderosos que solo! Importante puede anularlos en CSS). Esto significa que si un elemento es enrutado por un selector de ID y un selector de clase, el estilo CSS del selector de ID se aplicará al elemento sobre el estilo del selector de clase.

Echemos un vistazo a un ejemplo que demuestra este principio a continuación.

Digamos que estoy creando botones para mi sitio de Bootstrap. Si bien Bootstrap CSS ofrece estilos de botones predefinidos, voy a crear algunos personalizados, así que comenzaré con la plantilla más básica que se muestra a continuación.

 
<button type="button" class="btn">Button copy</button> 

En todo mi sitio, quiero que los elementos de mis botones sean Calypso Blue. En ese caso, usaría un selector de clase para definir todos los elementos en la clase de botón para que tengan un color de fondo azul (código de color hexadecimal # 00A4BD) y un color de fuente blanco (#FFFFFF).

Aquí está el código HTML:

 
<button type="button" class="btn">Subscribe</button>
<button type="button" class="btn">Subscribe</button>

Aquí está el CSS:

 
.btn {
   background-color: #00A4BD;
   color: #FFFFFF;
}

Aquí está el resultado:

ver la pluma qbrbxwa de Christina Perricone (@hubspot) en CódigoPen.

Pero supongamos que quiero que el botón de suscripción de mi página de inicio sea aún más llamativo. Entonces podría usar el selector de identificador para definir un botón con la «página de inicio» del identificador y darle un color de fondo fucsia y un color de fuente negro (# 000000). Todos los botones sin el ID de «inicio» seguirán la regla CSS del selector de clase (color de fondo azul y color de fuente blanco).

Aquí está el código HTML:

 
<button type="button" class="btn" id="homepage">Subscribe</button>
<button type="button" class="btn">Subscribe</button>

Aquí está el CSS:

 
#homepage {
   background-color: #FF00FF;
   color: #000000;
}
.btn {
   background-color: #00A4BD;
   color: #FFFFFF;
}

Aquí está el resultado:

ver la pluma Clase e identificador de CSS [Example] de Christina Perricone (@hubspot) en CódigoPen.

Realice cambios detallados con el selector de ID de CSS

Los selectores de CSS le permiten controlar la apariencia de los elementos HTML en su sitio. Con el Selector de ID, puede mantener un control granular sobre el proceso de personalización y el código apuntando a un solo elemento en la página. Solo necesita conocimientos básicos de HTML y CSS para usar este selector.

Nota del editor: esta publicación se publicó originalmente en mayo de 2020 y se actualizó para que esté completa.