TOC

This article is currently in the process of being translated into Spanish (~60% 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.

An ID selector looks just like a class selector, but instead of having a dot as the prefix, it uses the hash sign (#). Let's see how it works:

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

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

As you can see, it works just like classes, but instead of using a dot, we use a hash character, and instead of using the class attribute, we use the id attribute - the difference lies in the fact that the ID should be unique, as explained in the introduction to this chapter.

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

Just like the class selector, you may limit an ID selector to a specific element type by putting the name in front of the selector name, like this:

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!