Détails du sélecteur id CSS

Le sélecteur d'ID permet de spécifier les styles de manière indépendante des éléments du document.

Sélecteur d'ID CSS

Dans certains aspects, le sélecteur d'ID est similaire au sélecteur de classe, mais il y a également des différences importantes.

Syntaxe

D'abord, le sélecteur d'ID est précédé d'un signe # - appelé signe de damier ou signe de puits.

Voyons les règles suivantes :

*#intro {gras:bold;}

Comme pour les sélecteurs de classe, les sélecteurs d'ID peuvent ignorer les sélecteurs de balise générique. L'exemple précédent peut également être écrit ainsi :

#intro {font-weight:bold;}

L'effet de ce sélecteur sera le même.

La deuxième différence est que le sélecteur d'ID ne fait pas référence à la valeur de l'attribut class, mais sans aucun doute, il fait référence à la valeur de l'attribut id.

Voici un exemple réel de sélecteur d'ID :

<p id="intro"<p>Ce est un paragraphe d'introduction.</p>

Essayez-le vous-même

Sélecteur de classe ou sélecteur d'ID ?

Dans le chapitre sur les sélecteurs de classe, nous avons expliqué que vous pouvez attribuer une classe à plusieurs éléments. Dans le chapitre précédent, le nom de classe 'important' a été appliqué aux éléments p et h1, et il peut également être appliqué à d'autres éléments.

Différence 1 : il ne peut être utilisé qu'une seule fois dans le document

Contrairement aux classes, dans un document HTML, le sélecteur d'ID est utilisé une seule fois et uniquement une fois.

Différence 2 : il est impossible d'utiliser une liste de mots pour l'ID

Contrairement aux sélecteurs de classe, les sélecteurs d'ID ne peuvent pas être combinés, car l'attribut ID ne permet pas une liste de mots séparés par des espaces.

Différence 3 : les ID peuvent contenir plus de sens

Comme pour les classes, les ID peuvent être sélectionnés indépendamment des éléments. Dans certains cas, vous savez qu'un certain ID apparaîtra dans le document, mais vous ne savez pas sur quel élément il apparaîtra, donc vous souhaitez déclarer un sélecteur d'ID indépendant. Par exemple, vous pourriez savoir qu'il y aura un élément avec l'ID 'mostImportant' dans un document donné. Vous ne savez pas si cette chose la plus importante est un paragraphe, une phrase, une liste ou un titre de section. Vous savez seulement que chaque document aura un contenu le plus important, qui peut apparaître dans n'importe quel élément et ne peut apparaître qu'une seule fois. Dans ce cas, vous pouvez écrire une règle comme suit :

#mostImportant {couleur:red; fond:jaune;}

Cette règle correspondra aux éléments suivants (ces éléments ne peuvent pas apparaître simultanément dans le même document, car ils ont tous la même valeur d'ID) :

<h1 id="mostImportant"!C'est important !
<em id="mostImportant"!C'est important !
<ul> id="mostImportant"<ul>This is important!</ul>

Essayez-le vous-même :

Casse-dépendant

Veuillez noter que les sélecteurs de classe et id peuvent être casse-dépendants. Cela dépend de la langue du document. HTML et XHTML définissent les valeurs de classe et id comme casse-dépendantes, donc les valeurs de classe et id doivent correspondre aux valeurs correspondantes dans le document.

Par conséquent, pour le CSS et l'HTML suivants, l'élément ne deviendra pas en gras :

#intro {font-weight:bold;}
<p id="Intro"<p>Ce est un paragraphe d'introduction.</p>

Les sélecteurs ne correspondront pas aux éléments ci-dessus en raison de la différence de casse de la lettre i.