Detalles del selector de id de CSS

Los selectores de ID permiten especificar estilos de manera independiente de los elementos del documento.

Selector de ID de CSS

En algunos aspectos, los selectores de ID son similares a los selectores de clase, aunque también hay algunas diferencias importantes.

Sintaxis

Primero, el selector de ID tiene un símbolo # - también conocido como número de tablero o número de pozo.

Vea las siguientes reglas:

*#intro {font-weight:bold;}

Al igual que los selectores de clase, los selectores de ID pueden ignorar los selectores de ancla. El ejemplo anterior también se puede escribir como:

#intro {fuente-weight:fuerte;}

El efecto de este selector será el mismo.

La segunda diferencia es que el selector de ID no hace referencia al valor de la propiedad class, sin duda, debe referirse al valor de la propiedad id.

A continuación, se muestra un ejemplo real de selector de ID:

<p id="intro">Este es un párrafo de introducción.</p>

Prueba por ti mismo

Selector de clase o selector de ID?

En el capítulo sobre selectores de clase, explicamos que se puede asignar una clase a varios elementos. En el capítulo anterior, el nombre de clase 'important' se aplicó a los elementos p y h1, y también se puede aplicar a más elementos.

Diferencia 1: solo se puede usar una vez en el documento

A diferencia de las clases, en un documento HTML, el selector de ID se usará una vez y solo una vez.

Diferencia 2: no se puede usar lista de palabras para ID

A diferencia de los selectores de clase, los selectores de ID no se pueden usar juntos, ya que la propiedad de ID no permite listas de palabras separadas por espacios.

Diferencia 3: los ID pueden tener más significado

Al igual que las clases, los ID pueden elegirse independientemente de los elementos. En algunos casos, sabes que un documento contendrá un valor de ID específico, pero no sabes en qué elemento aparecerá, por lo que deseas declarar un selector de ID independiente. Por ejemplo, podrías saber que en un documento dado habrá un elemento con un valor de ID 'mostImportant'. No sabes si esta cosa más importante es un párrafo, una frase, una lista o un título de sección. Lo único que sabes es que cada documento tendrá este contenido más importante, que puede estar en cualquier elemento y solo puede aparecer una vez. En este caso, puedes escribir las siguientes reglas:

#mostImportant {color:red; background:yellow;}

Esta regla se ajustará a los siguientes elementos (estos elementos no pueden aparecer al mismo tiempo en el mismo documento, ya que tienen valores de ID iguales):

<h1 id="mostImportant"¡Esto es importante!
<em id="mostImportant"¡Esto es importante!
<ul id="mostImportant">¡Esto es importante!</ul>

Pruebe usted mismo:

Sensible a mayúsculas y minúsculas

Tenga en cuenta que los selectores de clase y id pueden ser sensibles a mayúsculas y minúsculas. Esto depende del idioma del documento. HTML y XHTML definen valores de clase e id como sensibles a mayúsculas y minúsculas, por lo que los valores de clase e id deben coincidir con los valores correspondientes en el documento.

Por lo tanto, para el siguiente CSS y HTML, el elemento no se convertirá en negrita:

#intro {fuente-weight:fuerte;}
<p id="Intro">Este es un párrafo de introducción.</p>

Dado que las mayúsculas y minúsculas de la letra i son diferentes, los selectores no coincidirán con los elementos anteriores.