Les sélecteurs en css

Les sélecteurs de type

Un sélecteur de type va nous permettre d'affecter un style à un élement précise .
Dans votre document HTML ou XHTML, vous avez plusieurs éléments, comme par exemple les éléments h1 ou encore h2.....hn.
Vous n’avez plus qu’à reprendre le nom de cet élément, et de l’utiliser comme sélecteur de type.

Si vous le souhaitez, vous pouvez retenir cette définition : un sélecteur de type correspond au nom d’un type d’élément dans le langage du document.
Cette définition provient directement de la spécification CSS 2 traduite en français.

Quelques exemples de sélecteurs de types

Nous allons prendre l’élément h1 de notre document. Le nom de notre sélecteur de type sera donc h1. Il n'y a donc rien de difficile.

Dans notre feuille de style, nous écrirons donc

h1 {color : black}

En revanche, si vous prenez l’élément p de votre document, alors votre sélecteur de type sera p :

p {color : red}

En résumé

Il suffit de prendre le nom d’un élément de votre document, et de l’utiliser comme sélecteur dans votre feuille de style css. Nous l’appellerons alors sélecteur de type.

Les sélecteurs de classes

Un sélecteur de classe vous permet d’assigner un style à n’importe quel élément de votre document. De plus, vous pouvez réutilisez à volonté ce type de sélecteur.
Il faudra utiliser l’attribut class au sein de votre balise HTML ouvrante pour que le style de votre classe s’applique à un élément.

Créer un sélecteur de classe

Ce qu'il faut savoir, c'est qu'un sélecteur de classe commence toujours par un point dans votre feuille de style.

Voici un exemple d’une classe que vous pouvez retrouver dans votre feuille de style :

.maclasse {color : blue ;} 

Ici, notre sélecteur est .maclasse.
Le nom de ce sélecteur, c'est moi qui l'ai choisi. En effet, vous pouvez donner n’importe quel nom à un sélecteur de classe.
Par exemple, si j’ai envie d’appeler mon sélecteur de classe julie , je noterai donc :

.julie {...} 

Comment utiliser l’attribut class dans notre document HTML ?

Les éléments qui structurent votre document HTML peuvent recevoir plus d'informations grâce à des attributs.
Nous allons donc ajouter l’attribut class au sein d'une balise HTML ouvrante, et donner une valeur à cet attribut. Ceci nous permettra d'informer notre document HTML que nous allons ajouter un style à un élément, et plus précisément une classe.

La valeur de cet attribut doit être le nom de votre sélecteur de classe.

.julie {...} 

<h1 class="julie"> Votre texte...  </h1> 

• Vous constaterez dans l'exemple ci-dessus que nous avons bien ajouté l'attribut class.
• Ensuite, nous avons ajouter le signe égal ainsi qu'une valeur entre guillements.
• Dans notre exemple, nous avons donner la valeur julie à notre attribut. Si cette valeur est julie, ça signifie donc que notre sélecteur de classe qui est dans notre feuille de style se nomme .julie

Les sélecteurs d’id

Qu’est-ce qu’un sélecteur d’id ?

Les sélecteurs d’id, que nous pouvons appeler "sélecteurs d’identifiant", ressemblent aux sélecteurs de classes. Il y a néanmoins quelques différences.

Un sélecteur d’id est utilisé pour identifier un élément unique.
Vous ne pouvez donc utiliser qu’une seule fois l’attribut id avec une même valeur, même si vous l’utiliser avec une nouvelle balise.

Je vous conseille donc d’utiliser des sélecteurs de classe si vous voulez appliquer plusieurs fois le même style à un grand nombre d’éléments dans votre document.

Créer un sélecteur d’id

Un sélecteur d’identifiant est précédé du symbole dièse #

Voici un exemple d’un sélecteur d’identifiant :

#test {background-color : blue ;} 

Tout comme les sélecteurs de classe, vous pouvez donner n’importe quel nom à un sélecteur d’id.

Comment utiliser l'attribut id dans notre document HTML ?

Dans votre document HTML, vous devez utiliser la syntaxe suivante :

<h1 id="titre"> Votre texte ...  </h1> 

Tandis que dans votre feuille de style, vous aurez ceci :

#titre {...}

Il suffit de prendre une balise HTML, de lui ajouter l’attribut id et de lui donner une valeur correspondant au nom d’un sélecteur d’id.

Si nous utilisons cet attribut, c'est simplement pour informer notre document HTML que nous allons ajouter un style à un élément, et plus précisément un id.