Sélecteurs CSS

Apprenez toutes les choses les plus importantes sur les sélecteurs CSS

Un sélecteur nous permet d'associer une ou plusieurs déclarations à un ou plusieurs éléments de la page.

Sélecteurs de base

Supposons que nous ayons unpélément sur la page, et nous voulons y afficher les mots en utilisant la couleur jaune.

Nous pouvonsciblercet élément en utilisant ce sélecteurp, qui cible tous les éléments en utilisant lepbalise dans la page. Une règle CSS simple pour réaliser ce que nous voulons est:

p {
  color: yellow;
}

Chaque balise HTML a un sélecteur correspondant, par exemple:div,span,img.

Si un sélecteur correspond à plusieurs éléments, tous les éléments de la page seront affectés par la modification.

Les éléments HTML ont 2 attributs qui sont très couramment utilisés dans CSS pour associer le style à un élément spécifique de la page:classetid.

Il y a une grande différence entre ces deux: à l'intérieur d'un document HTML, vous pouvez répéter la même choseclassvaleur sur plusieurs éléments, mais vous ne pouvez utiliser qu'unidune fois. En corollaire, en utilisant des classes, vous pouvez sélectionner un élément avec au moins 2 noms de classe spécifiques, ce qui n'est pas possible avec les identifiants.

Les classes sont identifiées à l'aide du.symbole, tandis que les identifiants utilisant le#symbole.

Exemple utilisant une classe:

<p class="dog-name">
  Roger
</p>
.dog-name {
  color: yellow;
}

Exemple utilisant un identifiant:

<p id="dog-name">
  Roger
</p>
#dog-name {
  color: yellow;
}

Combinaison de sélecteurs

Jusqu'à présent, nous avons vu comment cibler un élément, une classe ou un identifiant. Introduisons des sélecteurs plus puissants.

Cibler un élément avec une classe ou un identifiant

Vous pouvez cibler un élément spécifique auquel une classe ou un identifiant est attachée.

Exemple utilisant une classe:

<p class="dog-name">
  Roger
</p>
p.dog-name {
  color: yellow;
}

Exemple utilisant un identifiant:

<p id="dog-name">
  Roger
</p>
p#dog-name {
  color: yellow;
}

Pourquoi voudriez-vous faire cela, si la classe ou l'identifiant fournit déjà un moyen de cibler cet élément? Vous devrez peut-être faire ça pour avoir plusspécificité. Nous verrons ce que cela signifie plus tard.

Cibler plusieurs classes

Vous pouvez cibler un élément avec une classe spécifique en utilisant.class-name, comme vous l'avez vu précédemment. Vous pouvez cibler un élément avec 2 (ou plus) classes en combinant les noms de classe séparés par un point, sans espaces.

Exemple:

<p class="dog-name roger">
  Roger
</p>
.dog-name.roger {
  color: yellow;
}

Combinaison de classes et d'identifiants

De la même manière, vous pouvez combiner une classe et un identifiant.

Exemple:

<p class="dog-name" id="roger">
  Roger
</p>
.dog-name#roger {
  color: yellow;
}

Sélecteurs de regroupement

Vous pouvez combiner des sélecteurs pour appliquer les mêmes déclarations à plusieurs sélecteurs. Pour ce faire, séparez-les par une virgule.

Exemple:

<p>
  My dog name is:
</p>
<span class="dog-name">
  Roger
</span>
p, .dog-name {
  color: yellow;
}

Vous pouvez ajouter des espaces dans ces déclarations pour les rendre plus claires:

p,
.dog-name {
  color: yellow;
}

Suivez l'arborescence des documents avec les sélecteurs

Nous avons vu comment cibler un élément de la page en utilisant un nom de balise, une classe ou un identifiant.

Vous pouvez créer un sélecteur plus spécifique en combinant plusieurs éléments pour suivre la structure de l'arborescence du document. Par exemple, si vous avez unspanbalise imbriquée dans unpbalise, vous pouvez cibler celle-ci sans appliquer le style à unspantag non inclus dans unpétiqueter:

<span>
  Hello!
</span>
<p>
  My dog name is:
  <span class="dog-name">
    Roger
  </span>
</p>
p span {
  color: yellow;
}

Voyez comment nous avons utilisé un espace entre les deux jetonspetspan.

Cela fonctionne même si l'élément de droite a plusieurs niveaux de profondeur.

Pour rendre la dépendance stricte au premier niveau, vous pouvez utiliser le>symbole entre les deux jetons:

p > span {
  color: yellow;
}

Dans ce cas, si unspann'est pas un premier enfant dupélément, la nouvelle couleur ne sera pas appliquée.

Les enfants directs auront le style appliqué:

<p>
  <span>
    This is yellow
  </span>
  <strong>
    <span>
      This is not yellow
    </span>
  </strong>
</p>

Les sélecteurs frères adjacents nous permettent de styliser un élément uniquement s'ils sont précédés d'un élément spécifique. Nous le faisons en utilisant le+opérateur:

Exemple:

p + span {
  color: yellow;
}

Cela attribuera la couleur jaune à tous les éléments de travée précédés d'unpélément:

<p>This is a paragraph</p>
<span>This is a yellow span</span>

Nous avons beaucoup plus de sélecteurs que nous pouvons utiliser:

  • sélecteurs d'attributs
  • sélecteurs de pseudo-classes
  • sélecteurs de pseudo-éléments

Plus d'informations sur ceux-ci sur les futurs messages.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS:


Tech Wiki en ligne!