Aller au contenu

CSS Sélecteurs

Sélecteur de balise#

C’est le nom de la balise HTML. Il permet d’appliquer un style CSS à tous les éléments HTML de même type.

Sélectionne tous les <p>

p { }

Sélecteur multiple#

Séparer les différents sélecteurs par une virgule.

Applique le même style aux éléments <h1> et <div>

h1, div {
  color: blue;
  background-color: white;
}

Sélecteur hiérarchique#

Permet de désigner un élément contenu dans un autre : un enfant. Pour cela, il faut séparer les sélecteurs par un espace.

Code HTML

<div>
  <p>Contenu du paragraphe 1</p>
</div>
<p>Contenu du paragraphe 2</p>

Sélectionne uniquement les paragraphes dans les div

div p {
  color: blue;
  background-color: white;
}

Dans cet exemple, seul le premier paragraphe est affecté par la règle CSS. Le second paragraphe n’étant pas enfant d’une div.

Sélecteurs d’id et de class#

Le caractère # correspond au sélecteur d'identifiant.

Sélectionner un élément HTML avec id="toto"

#toto {
  ...
}

Le caractère . correspond au sélecteur de classe.

Sélectionne un (ou plusieurs) éléments HTML avec class="toto"

.toto {
  ...
}

D’autres exemples :

Sélectionne les li contenu dans un ul, lui-même contenu dans un élément HTML avec id="menu"

#menu ul li { ... }

Sélectionne les éléments qui ont class="petit", contenus dans un élément avec id="menu" ET tous les éléments qui ont class="rouge"

#menu .petit, .rouge { ... }

Autres sélecteurs#

  • + sélectionne l’élément qui suit directement un élément (ex: li + li)
  • > sélecteur hiérarchique (identique à l’espace) mais pour les enfants de premier niveau uniquement
  • ~ sélectionne tous les éléments qui suivent (directement ou indirectement)

Pseudo-Classes et pseudo-éléments#

Ces sélecteurs sont un peu à part. Ils permettent d’interagir avec l’utilisateur ou avec le DOM sans pour autant ajouter de balisage HTML

Sélectionne les liens, au survol de la souris et au focus avec le clavier

a:hover, a:focus {
  color: green;
}

Sélectionne les liens au clic actif (enfoncé)

a:active {
  color: green;
}

D’autres pseudo-classes :

  • :first-child sélectionne le premier enfant d’un élément
  • :last-child sélectionne le dernier enfant
  • :nth-child(n) sélectionne le ne enfant

Les pseudo-éléments permettent un contrôle encore plus poussé, comme ::first-line, ::first-letter et permettent même l'ajout de contenu décoratif avec ::before et ::after.

Jouez !

Pour le fun: jouez à CSS Diner pour apprendre tous les sélecteurs CSS!