Selector de id de CSS

Selector de id

El selector de id puede especificar estilos específicos para elementos HTML con un id específico.

El selector de id se define con "#".

Los dos selectores de id siguientes, el primero puede definir el color del elemento como rojo, y el segundo define el color del elemento como verde:

#red {color:red;}
#green {color:green;}

En el siguiente código HTML, el elemento p con atributo id 'red' se muestra en rojo, mientras que el elemento p con atributo id 'green' se muestra en verde.

<p id="red">Este párrafo es rojo.</p>
<p id="green">Este párrafo es verde.</p>

Nota:La propiedad de id solo puede aparecer una vez en cada documento HTML. ¿Quieres saber la razón? Consulta XHTML: reconstrucción de sitios web.

Selector de id y selector derivado

En los diseños modernos, los selectores de id a menudo se utilizan para establecer selectores derivados.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Los estilos anteriores solo se aplicarán a los párrafos que aparezcan dentro de elementos con id 'sidebar'. Este elemento es probablemente un div o una celda de tabla, aunque también podría ser una tabla u otro elemento de bloques. Incluso puede ser un elemento en línea, como <em></em> o <span></span>, aunque este uso es ilegal porque no se puede insertar <p> dentro de un elemento en línea <span> (si olvidaste la razón, consulta XHTML: reconstrucción de sitios web)

Un selector, múltiples usos

Aún cuando los elementos etiquetados como sidebar solo pueden aparecer una vez en el documento, este selector de id como selector derivado puede ser utilizado muchas veces:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Aquí, los elementos p dentro de sidebar se tratan de manera especial, al igual que los elementos h2 dentro de sidebar, que también se tratan de manera especial, a diferencia de otros elementos h2 en la página.

Selector individual

El selector de id puede actuar independientemente incluso si no se utiliza para crear selectores derivados:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

De acuerdo con esta regla, el elemento con id 'sidebar' tendrá un borde de puntos negros de un píxel de ancho, y alrededor de él habrá un relleno interno (padding) de 10 píxeles. Los navegadores de Windows/IE de versiones anteriores pueden ignorar esta regla a menos que especifique explícitamente el elemento al que pertenece este selector:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Contenido relacionado

Si necesita aprender más sobre los selectores de id, lea los tutoriales avanzados en CodeW3C.com:Detalles del selector de id de CSS.