TOC

This article is currently in the process of being translated into Spanish (~83% done).

Selectores:

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

With the ID selector, you get really specific - from targeting all elements by name/type or class name, the ID selector, by design, only targets a single element on the page. Use it mainly for the larger, structural elements on your page, e.g. the navigation, top area, main content and so on.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!