The ID selector

Comenzamos la parte Selector de este tutorial con el selector más amplio, que apunta a los elementos, luego hablamos de los selectores más específicos de tipo de clase, y ahora vamos a discutir el tipo de selector más específico: el selector de ID. El selector de ID es realmente tan específico que sólo apunta a un solo elemento en la página!

Tal como vimos con el selector de clases, el selector de ID utiliza un atributo específico que se encuentra en todas las etiquetas HTML para averiguar si la regla específica se aplica al elemento o no, y ese es el atributo ID. El valor del atributo ID debe ser único, según la especificación HTML, lo que significa que solo se puede utilizar en un solo elemento por página. Como consecuencia de eso, un selector de CSS ID también debe utilizarse solo cuando usted necesita apuntar uno, específico y elemento único en una página.

Un selector de ID se ve como un selector de clase, pero en lugar de tener un punto como prefijo, usa el símbolo numeral (#). Veamos como funciona:

<style type="text/css">
#main-header {
	color: GreenYellow;
}
</style>

<h1 id="main-header">Hello, CSS!</h1>

Como puedes ver, funciona como en clases, pero en lugar de usar un punto usamos el carácter numeral, y en lugar de usar el atributo clase usamos el atributo id - La diferencia recae en el hecho de que el ID tiene que ser único, como explicamos en la introducción de este capitulo.

Entonces, ¿por qué usar selectores de ID? Bueno, obviamente, nadie te obligará - puedes usar selectores de clase en su lugar, si quieres. Pero mediante el uso de un ID selector, especificas para ti y todos los demás que van a escribir el marcado para su CSS, que el selector sólo se debe utilizar en un solo lugar. Esto se utiliza a menudo para los elementos de la página principal, por ejemplo, las etiquetas que crea la estructura de la página (menú, cuadro lateral, contenido principal, etc.).

Además de eso, es posible que puedas especificar ID para algunas de tus etiquetas, por ejemplo, para hacer referencia a ellas desde código JavaScript. Si es así, puede escribir un selector CSS ID y hacer que se aplique automáticamente.

Element specific ID selectors

Como en el selector de clase, tu puedes limitar un selector de ID a un tipo de elemento especifico poniendo el nombre adelante del nombre del selector, como aquí:

h1#main-header {
	color: GreenYellow;
}

With that in place, this specific ID selector will only apply to a header (h1) tag.

En resumen

Con el selector ID, puedes ser realmente específico - de apuntar a todos los elementos agrupados por nombre, tipo o nombre de la clase, el Selector ID, por diseño, solo apunta a un elemento en especifico dentro de la página. Se usa principalmente para los elementos más largos y estructurales en la página, ejemplo, la navegación, el área superior, el "main" y otros.