Sélecteurs id CSS

Sélecteur d'identité

Le sélecteur d'identité peut attribuer un style spécifique aux éléments HTML portant un identité spécifique.

Le sélecteur d'identité est défini par "#".

Les deux sélecteurs d'identité suivants, le premier peut définir la couleur de l'élément en rouge, et le second en vert :

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

Dans le code HTML suivant, l'élément p dont l'attribut d'identité est red est affiché en rouge, tandis que l'élément p dont l'attribut d'identité est green est affiché en vert.

<p id="red">Ce paragraphe est rouge.</p>
<p id="green">Ce paragraphe est vert.</p>

Remarque :L'attribut d'identité ne peut apparaître qu'une seule fois dans chaque document HTML. Savez-vous pourquoi ? Veuillez consulter XHTML: reconstruction de site.

Sélecteur d'identité et sélecteur dérivé

Dans les mises en page modernes, le sélecteur d'identité est souvent utilisé pour créer des sélecteurs dérivés.

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

Les styles ci-dessus ne s'appliquent qu'aux paragraphes qui apparaissent à l'intérieur des éléments dont l'identité est sidebar. Cet élément est probablement un div ou une cellule de tableau, bien que cela puisse également être un tableau ou un autre élément en bloc. Il peut même être un élément en ligne, comme <em></em> ou <span></span>, mais cette utilisation est illégale car il est interdit d'insérer un <p> dans un élément en ligne <span> (si vous avez oublié la raison, veuillez consulter XHTML: reconstruction de site)

Un sélecteur, plusieurs utilisations

Même si les éléments marqués comme sidebar ne peuvent apparaître qu'une seule fois dans le document, cet sélecteur d'identité en tant que sélecteur dérivé peut être utilisé plusieurs fois :

#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;
	}

Dans ce cas, les éléments p du sidebar sont traités de manière spéciale, distinctement des autres éléments p de la page, et les éléments h2 du sidebar sont également traités différemment des autres éléments h2 de la page.

Sélecteur isolé

Les sélecteurs id, même s'ils ne sont pas utilisés pour créer des sélecteurs dérivés, peuvent agir indépendamment :

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

Selon cette règle, l'élément d'id sidebar aura une bordure pointillée noire d'un pixel de large, et aura également une marge interne (padding, espace interne) de 10 pixels. Les navigateurs Windows/IE anciens pourraient ignorer cette règle, sauf si vous définissez spécifiquement l'élément appartenant à ce sélecteur :

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

Contenu connexe

Si vous avez besoin d'apprendre davantage sur les sélecteurs id, veuillez lire les tutoriels avancés de CodeW3C.com :Détails du sélecteur id CSS.