Sélecteurs CSS

Qu'est-ce que le sélecteur ?

Un sélecteur CSS est un modèle pour faire correspondre les éléments d'une page Web. Les règles de style associées à ce sélecteur seront appliquées aux éléments qui correspondent au modèle de sélecteur.

Les sélecteurs sont l'un des aspects les plus importants de CSS car ils vous permettent de cibler des éléments spécifiques sur votre page Web de différentes manières afin qu'ils puissent être stylisés.

Plusieurs types de sélecteurs sont disponibles en CSS, regardons-les de plus près :

Sélecteur universel

Le sélecteur universel, signalé par un astérisque ( *), correspond à chaque élément de la page.

Le sélecteur universel peut être omis si d'autres conditions existent sur l'élément. Ce sélecteur est souvent utilisé pour supprimer les marges et les rembourrages par défaut des éléments à des fins de test rapide.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

* {
    margin: 0;
    padding: 0;
}

Les règles de style à l'intérieur du sélecteur  *  seront appliquées à chaque élément d'un document.

Remarque : Il est recommandé de ne pas utiliser trop souvent le sélecteur universel ( *) dans un environnement de production, car ce sélecteur correspond à chaque élément d'une page Web qui met trop de pression inutile sur les navigateurs. Utilisez plutôt le type d'élément ou le sélecteur de classe.

 

Sélecteurs de type d'élément

Un sélecteur de type d'élément correspond à toutes les instances de l'élément dans le document avec le nom de type d'élément correspondant. Essayons un exemple pour voir comment cela fonctionne réellement :

p {
    color: blue;
}

Les règles de style à l'intérieur du sélecteur  p  seront appliquées à chaque élément (ou paragraphe)  <p>  du document et le coloreront en bleu, quelle que soit leur position dans l'arborescence du document.

Sélecteurs d'identifiant

Le sélecteur d'identifiant est utilisé pour définir des règles de style pour un élément unique ou spécifique .

Le sélecteur d'identifiant est défini avec un signe dièse ( #) immédiatement suivi de la valeur de l'identifiant.

#error {
    color: red;
}

Cette règle de style rend le texte d'un élément en rouge, dont l'attribut  id  est défini sur error ( id="error" ).

 

Remarque : La valeur d'un attribut id doit être unique dans un document donné, ce qui signifie qu'aucun élément de votre document HTML ne peut partager la même valeur id.

 

Sélecteurs de classe

Les sélecteurs de classe peuvent être utilisés pour sélectionner n'importe quel élément HTML qui a un attribut  class. Tous les éléments ayant cette classe seront formatés selon la règle définie.

Le sélecteur de classe est défini par un signe point ( .) immédiatement suivi de la valeur de la classe.

.blue {
    color: blue;
}

Les règles de style ci-dessus rendent le texte en bleu de chaque élément du document dont l'attribut  class est défini sur blue. Vous pouvez le rendre un peu plus particulier. Par example:

p.blue {
    color: blue;
}

La règle de style à l'intérieur du sélecteur  p.blue  rend le texte en bleu uniquement pour les éléments <p> dont l'attribut  class est défini sur blue, et n'a aucun effet sur les autres paragraphes.

Sélecteurs descendants

Vous pouvez utiliser ces sélecteurs lorsque vous devez sélectionner un élément qui est le descendant d'un autre élément, par exemple, si vous souhaitez cibler uniquement les liens contenues dans une liste non ordonnée, plutôt que de cibler tous les liens. Voyons voir comment ça fonctionne:

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

Les règles de style à l'intérieur du sélecteur  ul.menu li a  s'appliquent uniquement aux éléments <a> contenus dans un élément <ul> ayant la classe .menu, et n'ont aucun effet sur les autres liens à l'intérieur du document.

De même, les règles de style à l'intérieur du sélecteur  h1 em  seront appliquées uniquement aux éléments <em> contenus à l'intérieur de l'élément <h1> et n'ont aucun effet sur les autres éléments <em>.

Sélecteurs enfants

Un sélecteur d'enfant est utilisé pour sélectionner uniquement les éléments qui sont les enfants directs d'un élément.

Un sélecteur enfant est composé de deux ou plusieurs sélecteurs séparés par un symbole supérieur à ( >). Vous pouvez utiliser ce sélecteur, par exemple, pour sélectionner le premier niveau d'éléments de liste à l'intérieur d'une liste imbriquée qui a plus d'un niveau. Voyons un exemple pour comprendre comment cela fonctionne :

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

La règle de style à l'intérieur du sélecteur  ul > li  s'applique uniquement aux éléments <li> qui sont des enfants directs des éléments <ul> et n'a aucun effet sur les autres éléments de la liste.

Sélecteurs de frères et sœurs adjacents

Les sélecteurs frères adjacents peuvent être utilisés pour sélectionner des éléments frères (c'est-à-dire des éléments au même niveau). Ce sélecteur a la syntaxe suivante : E1 + E2, où E2 est la cible du sélecteur.

Le sélecteur  h1 + p   dans l'exemple suivant ne sélectionnera les éléments <p> que si les éléments <h1> et <p> partagent le même parent dans l'arborescence du document et <h1> précèdent immédiatement l'élément <p>. Cela signifie que seuls les paragraphes qui suivent immédiatement chaque titre <h1> auront les règles de style associées. Voyons comment fonctionne réellement ce sélecteur :

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

Sélecteurs généraux de frères et sœurs

Le sélecteur de frère général est similaire au sélecteur de frère adjacent (E1 + E2), mais il est moins strict. Un sélecteur frère général est composé de deux sélecteurs simples séparés par le caractère tilde (∼ ). Il peut être écrit comme : E1 ∼ E2, où E2 est la cible du sélecteur.

Le sélecteur  h1 ∼ p  dans l'exemple ci-dessous sélectionnera tous les éléments <p> qui précèdent l'élément <h1>, où tous les éléments partagent le même parent dans l'arborescence du document.

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

Il existe des sélecteurs plus sophistiqués comme les sélecteurs d'attributs , les pseudo-classes , les pseudo-éléments . Nous discuterons de ces sélecteurs en détail dans les prochains chapitres.

Grouper les sélecteurs

Souvent, plusieurs sélecteurs d'une feuille de style partagent les mêmes déclarations de règles de style. Vous pouvez les regrouper dans une liste séparée par des virgules pour minimiser le code dans votre feuille de style. Cela vous empêche également de répéter les mêmes règles de style encore et encore. Nous allons jeter un coup d'oeil:

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

Comme vous pouvez le voir dans l'exemple ci-dessus, la même règle de style  font-weight: normal ;est partagée par les sélecteurs h1, h2 et h3, donc elle peut être regroupée dans une liste séparée par des virgules, comme ceci :

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}