Apprendre CSS : Ciblage et Sélecteurs

Sélecteurs

Sélecteurs de type

Ces sélecteurs simples permettent de cibler les éléments qui correspondent à la balise indiquée.

Syntaxe : nom-tag

/* Cible tous les paragraphes */
p { ... }

Sélecteurs de classe

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.

Syntaxe : .nom-class

/* Cible toutes les balises HTML possédant la classe "btn-red" */
.btn-red { ... }

Sélecteurs d’identifiant

Ce sélecteur simple permet de cibler un élément d’un document en fonction de la valeur de son attribut id.

Syntaxe : #nom-id

/* Cible la balise HTML qui a l'id "menu" */
#menu { ... }

Sélecteurs d’attribut

Ce sélecteur simple permet de cibler des éléments d’un document en fonction de la valeur d’un de leurs attributs.

Syntaxe : [attr], [attr="valeur"]

/* Cible tous les éléments qui possèdent l'attribut "checked" */
[checked] { ... }

/* Cible tous les éléments HTML "input" qui ont le type "password" */
input[type="password"] { ... }

Sélecteur universel

Ce sélecteur permet de cibler tous les nœuds (= balises) d’un document.

Syntaxe : *

/* Cible tous les éléments HTML */
* { ... }

Sélection multiple

Pour appliquer des règles CSS à plusieurs sélecteurs, on les sépare par une virgule.

/* Cible tous les h2 et h3 */
h2, h3 { ... }

Combinateurs

Les combinateurs permettent de combiner des sélecteurs pour un ciblage plus précis.

Éléments descendants

Le combinateur ␣ (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d’un élément donné.

Syntaxe : a b

/* Cible tous les liens situés dans l'élément qui a l'id "demo" */
#demo a { ... }

<div id="demo">
	<a href="#">Mon lien</a> <!-- Lui -->
	<p>
		le lien est :
		<a href="#">clic !</a> <!-- Et lui -->
	</p>
</div>
<a href="#">coucou</a>

Éléments fils

Le combinateur > permet de sélectionner les nœuds qui sont des fils directs d’un élément donné.

Syntaxe : a > b

/* Cible tous les éléments "strong" qui sont des fils directs des paragraphes */
p > strong { ... }

<p>
	<strong>Texte 1</strong> <!-- Lui -->
	<span class="demo">Texte <strong>2</strong></span>
</p>

Éléments voisins directs

Le combinateur + permet de sélectionner les nœuds qui suivent immédiatement un élément donné.

Syntaxe : a + b

/* Cible tous les éléments "p" qui suivent immédiatement une balise <div> */
div + p { ... }

<div>...</div>
<p>Texte 1</p> <!-- Lui -->
<p>Texte 2</p>
<div>
	<p>Texte 3</p>
	<div>...</div>
	<p>Texte 4</p> <!-- Lui -->
</div>

Éléments voisins généraux

Le combinateur ~ permet de sélectionner les nœuds qui suivent (immédiatement ou non).

Syntaxe : a ~ b

/* Cible tous les éléments "p" qui suivent immédiatement ou non une balise <div> */
div ~ p { ... }

<div>...</div>
<p>Texte 1</p> <!-- Lui -->
<p>Texte 2</p> <!-- Lui -->
<div>
	<p>Texte 3</p>
	<div>...</div>
	<p>Texte 4</p> <!-- Lui -->
</div>

Pseudo-classes

Les pseudos-classes sont des mots-clés qui peuvent être ajoutés à un sélecteur afin d’indiquer l’état spécifique dans lequel l’élément doit être pour être ciblé par la déclaration.

Syntaxe : selecteur:pseudo-class

Vous trouverez ci-dessous les pseudo-classes principales.

hover

La pseudo-classe :hover permet de spécifier l’apparence d’un élément au moment où l’utilisateur le survole avec le pointeur, sans nécessairement l’activer.

a:hover {
	color: orange;
}

active

La pseudo-classe :active permet de cibler un élément lorsqu’il est activé par l’utilisateur. Elle permet de fournir un feedback indiquant que l’activation a bien été détectée par le navigateur. Lorsqu’on a une interaction avec un pointeur, il s’agit généralement du moment entre l’appui sur le pointeur et le relâchement de celui-ci.

a:active {
	color: orange;
}

visited

La pseudo-classe :visited permet de modifier l’aspect d’un lien après que l’utilisateur l’ait visité.

a:visited {
	color: orange;
}

focus

La pseudo-classe :focus permet de cibler un élément lorsqu’il reçoit le focus (soit il est sélectionné à l’aide du clavier, soit il est activé avec la souris comme par exemple le champ d’un formulaire).

input:focus {
	border-color: green;
}

Pseudo-éléments

Les pseudo-éléments sont des mots-clés ajoutés à un sélecteur pour mettre en forme certaines parties uniquement de l’élément ciblé par la règle. On ne peut utiliser qu’un seul pseudo-élément dans un sélecteur.

Syntaxe : selecteur::pseudo-element

Vous trouverez ci-dessous les pseudo-éléments principaux.

first-line

Le pseudo-élément ::first-line applique du style à la première ligne d’un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte.

p::first-line {
	color: red;
}

first-letter

Le pseudo-élément ::first-letter applique du style à la première lettre de la première ligne d’un élément.

p::first-letter {
	font-size: 200%;
	font-weight: bold;
}

selection

Le pseudo-élément ::selection permet d’appliquer des règles CSS à une portion du document qui a été sélectionnée par l’utilisateur (via la souris ou un autre dispositif de pointage).

*::selection {
	background-color: orange;
}

before

Le pseudo-élément ::before crée un élément qui sera le premier enfant de l’élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content.

button::before {
	content: "→ ";
}

after

Le pseudo-élément ::after crée un élément qui sera le dernier enfant de l’élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content.

button::after {
	content: " →";
}