Les Sélecteurs
Présentation
Il existe de nombreux outils qui facilitent la sélection plus ou moins précise des balises sur lesquelles on souhaite appliquer une série de propriétés CSS. Ces outils sont connus sous le nom de sélecteurs.
Certaines propriétés CSS ont une valeur par défaut qui est héritée par les éléments enfants. Ainsi, si un élément enfant possède une propriété avec la valeur inherit, cette propriété prendra la valeur de l'élément parent.
Voici quelques propriétés populaires qui sont héritées par défaut :
- font-* : La police, sa taille, son poids, ...
- color : La couleur du texte.
- line-height : La hauteur de ligne.
- text-align : L'alignement horizontal.
- visibility : La visibilité.
- cursor : Le type du curseur de la souris.
- white-space : Le traitement des espaces blancs.
Les Sélecteurs Basiques
Sélection par Balise
/* Cibler toutes les balises "div" */
div { /* Les propriétés... */ }
<main>
<section id="section-introduction" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-galerie" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-partenaires">
<h2></h2>
<h3></h3>
<div></div>
</section>
</main> Sélection par Classe
/* Cibler toutes les balises ayant la classe "secton-animation" */
.section-animation { /* Les propriétés... */ }
<main>
<section id="section-introduction" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-galerie" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-partenaires">
<h2></h2>
<h3></h3>
<div></div>
</section>
</main> Sélection par ID
/* Cibler la balise ayant l'ID "section-partenaires" */
#section-partenaires { /* Les propriétés... */ }
<main>
<section id="section-introduction" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-galerie" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-partenaires">
<h2></h2>
<h3></h3>
<div></div>
</section>
</main> Sélection par combinaison
/* Cibler toutes les balises "h2" ayant la classe "titre" */
h2.titre { /* Les propriétés... */ }
<main>
<section id="section-introduction" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-galerie" class="section-animation">
<h2 class="titre"></h2>
<h3 class="titre"></h3>
<div></div>
</section>
<section id="section-partenaires">
<h2></h2>
<h3></h3>
<div></div>
</section>
</main> Les Sélecteurs de Relation
Notez que le couple HTML/CSS est interprété de manière linéaire, signifiant que les instructions sont exécutées de haut en bas. Cela implique qu'il est impossible de sélectionner des balises parentes ou des balises frères aînés (balises hiérarchiquement identiques mais déclarées avant) à partir d'une balise de référence.
Sélection des Descendants
/* Cibler toutes les balises "div" ayant comme parent (direct ou indirect) une balise "section" */
section div { /* Les propriétés... */ }
<section>
<p></p>
<div>
<p></p>
<div></div>
<p></p>
<span></span>
<p></p>
<p></p>
</div>
<p></p>
<p></p>
<div></div>
</section> Sélection des Enfants (directs)
/* Cibler toutes les balises "div" ayant comme parent (direct) une balise "section" */
section > div { /* Les propriétés... */ }
<section>
<p></p>
<div>
<p></p>
<div></div>
<p></p>
<span></span>
<p></p>
<p></p>
</div>
<p></p>
<p></p>
<div></div>
</section> Sélection du Frère Adjacent (suivant)
/* Cibler toutes les balises "p" étant le frère immédiat suivant de chaque balise "div" */
div + p { /* Les propriétés... */ }
<section>
<p></p>
<div>
<p></p>
<div></div>
<p></p>
<span></span>
<p></p>
<p></p>
</div>
<p></p>
<p></p>
<div></div>
</section> Sélection des Frères (suivants)
/* Cibler toutes les balises "p" qui sont des frères suivants de chaque balise "div" */
div ~ p { /* Les propriétés... */ }
<section>
<p></p>
<div>
<p></p>
<div></div>
<p></p>
<span></span>
<p></p>
<p></p>
</div>
<p></p>
<p></p>
<div></div>
</section> Les Sélecteurs d'Attribut
/* Cibler toutes les balises ayant un attribut "name" */
[name] { /* Les propriétés... */ }
<form method="post">
<div>
<label for="pseudo">Pseudo: </label>
<input type="text" name="pseudo" id="pseudo">
</div>
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email">
</div>
<div class="btn-conteneur">
<input type="submit" value="envoyer">
</div>
</form>
/* Cibler toutes les balises ayant un attribut "name" avec la valeur "email" */
[name="email"] { /* Les propriétés... */ }
<form method="post">
<div>
<label for="pseudo">Pseudo: </label>
<input type="text" name="pseudo" id="pseudo">
</div>
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email">
</div>
<div class="btn-conteneur">
<input type="submit" value="envoyer">
</div>
</form>
/* Cibler toutes les balises ayant un attribut "class" dont la valeur commence par "btn" */
[class^="btn"] { /* Les propriétés... */ }
<form method="post">
<div>
<label for="pseudo">Pseudo: </label>
<input type="text" name="pseudo" id="pseudo">
</div>
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email">
</div>
<div class="btn-conteneur">
<input type="submit" value="envoyer">
</div>
</form>
/* Cibler toutes les balises ayant un attribut "type" dont la valeur termine par "t" */
[type$="t"] { /* Les propriétés... */ }
<form method="post">
<div>
<label for="pseudo">Pseudo: </label>
<input type="text" name="pseudo" id="pseudo">
</div>
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email">
</div>
<div class="btn-conteneur">
<input type="submit" value="envoyer">
</div>
</form>
/* Cibler toutes les balises ayant un attribut "for" dont la valeur contient au moins une occurence de "mai" */
[for*="mai"] { /* Les propriétés... */ }
<form method="post">
<div>
<label for="pseudo">Pseudo: </label>
<input type="text" name="pseudo" id="pseudo">
</div>
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email">
</div>
<div class="btn-conteneur">
<input type="submit" value="envoyer">
</div>
</form> Les Sélecteurs de Pseudo-Classe
Les pseudos-classes sont des sélecteurs spéciaux qui permettent de cibler des éléments en fonction de leur état, de leur position ou de leur relation avec d'autres éléments. Ces sélecteurs sont identifiables par le préfixe du symbole deux-points : suivi du nom de la pseudo-classe.
Sélecteurs de Position
/* Cibler toutes les balises "p" étant le premier enfant de leur parent direct */
p:first-child { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les balises "p" étant le dernier enfant de leur parent direct */
p:last-child { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les balises "p" étant le deuxième enfant de leur parent direct */
p:nth-child(2) { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les balises "p" qui sont le deuxième enfant de leur parent direct, en commençant par la fin des enfants */
p:nth-last-child(2) { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les premières balises "p" au sein de leur parent direct */
p:first-of-type { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les dernières balises "p" au sein de leur parent direct */
p:last-of-type { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les deuxièmes balises "p" au sein de leur parent direct */
p:nth-of-type(2) { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les premières balises "p" au sein de leur parent direct, en commençant par le dernier élément de ce type */
p:nth-last-of-type(1) { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les balises "p" étant vides de contenu */
p:empty { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main>
/* Cibler toutes les balises "p" n'ayant pas la classe "pasClasse" */
p:not([class="pasClasse"]) { /* Les propriétés... */ }
<main>
<section>
<div></div>
<p class="pasClasse"></p>
<p></p>
<p></p>
</section>
<section>
<p></p>
<p></p>
<p>Loorem</p>
<div></div>
</section>
</main> Notez que les sélecteurs de position, tels que nth-child() ou encore nth-of-type(), permettent de spécifier des arguments plus complexes que de simples nombres entiers. Ces sélecteurs permettent d'utiliser l'expression mathématique an + b, pour cibler les balises avec plus de flexibilité.
- n : Entier représentant le compteur des éléments de la séquence (0, 1, 2, ...)
- a : Coefficient de répétition utilisé pour cibler les éléments dont la position dans la séquence correspond aux multiples de sa valeur.
- b : Valeur d'ajustement.
Par exemple, si nous voulons cibler toutes les balises "p" qui ont une position paire dans la séquence des enfants du même parent, nous pourrions utiliser le sélecteur nth-child(2n). Dans ce contexte, 2n indique de cibler tous les multiples de 2. Pour sélectionner les positions impaires, il suffit d'ajouter la variable d'ajustement comme ceci : nth-child(2n+1).
/* Cibler toutes les balises "p" situées en position paire dans la séquence des enfants du parent direct */
p:nth-child(2n) { /* Les propriétés... */ }
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> Avec cette notation, il est aussi possible de cibler des balises à partir d'une position spécifique. Imaginons que nous désirons cibler toutes les balises "p" étant des enfants direct d'un même parent et ce à partir de celle placée en deuxième position, nous devrions alors utiliser la formule nth-child(n+2).
/* Cibler toutes les balises "p" à partir de la deuxième position dans la séquence des enfants du parent direct */
p:nth-child(n+2) { /* Les propriétés... */ }
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> De la même manière, nous pouvons aussi cibler des balises de la première position jusqu'à une position spécifique. Imaginons que nous désirons cibler toutes les balises "p" étant des enfants direct d'un même parent et ce jusqu'à celle placée en quatrième position, nous devrions alors utiliser la formule nth-child(-n+4).
/* Cibler toutes les balises "p" jusqu'à la quatrième position dans la séquence des enfants du parent direct */
p:nth-child(-n+4) { /* Les propriétés... */ }
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> Finalement, nous avons la possibilité de combiner les sélecteurs de position pour cibler une séquence débutant à une certaine position et se terminant à une autre position spécifique. Reprenons le sélecteur des deux exemples précédents pour cibler les balises situées de la deuxième à la quatrième position.
/*
Cibler toutes les balises "p" situées de la deuxième à la quatrième position dans la séquence des enfants du parent direct.
La première partie (n+2) cible toutes les balises à partir de la 2ème position inclusivement.
La deuxième partie (-n+4) cible toutes les balises jusqu'à la 4ème position inclusivement.
*/
p:nth-child(n+2):nth-child(-n+4) { /* Les propriétés... */ }
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> Sélecteurs d'État
/*
Cibler la balise "a" lorsqu'elle est activée,
c'est-à-dire au moment où un utilisateur clique sur l'élément avec la souris ou appuie dessus avec une touche du clavier
*/
a:active { /* Les propriétés... */ }
/*
Cibler la balise "a" lorsqu'elle reçoit le focus.
Un élément peut obtenir le focus lorsqu'il est sélectionné par l'intermédiaire de la souris, du clavier ou d'autres dispositifs d'entrée
*/
a:focus { /* Les propriétés... */ }
/* Cibler la balise "a" lorsque le curseur de la souris survole l'élément */
a:hover { /* Les propriétés... */ }
Sélecteurs d'Hyperliens
/* Cibler toutes les balises "a" qui n'ont pas encore été visitées par l'utilisateur */
a:link { /* Les propriétés... */ }
/* Cibler toutes les balises "a" qui ont déjà été visitées par l'utilisateur */
a:visited { /* Les propriétés... */ }
Sélecteurs d'État d'Interface Utilisateur
/* Cibler toutes les balises "input" qui ont l'attribut "required" */
input:required { /* Les propriétés... */ }
/* Cibler toutes les balises "input" qui n'ont pas l'attribut "required" */
input:optional { /* Les propriétés... */ }
/* Cibler toutes les balises "input" de type "checkbox" et "radio" qui sont cochées/sélectionnées */
input:checked { /* Les propriétés... */ }
/* Cibler toutes les balises "input" dont la saisie utilisateur respecte les règles définies par les attributs HTML */
input:valid { /* Les propriétés... */ }
/* Cibler toutes les balises "input" dont la saisie utilisateur ne respecte pas les règles définies par les attributs HTML */
input:invalid { /* Les propriétés... */ }
Les Sélecteurs de Pseudo Élement
Les pseudo-éléments, identifiables par le préfixe à double deux-points ::, sont des sélecteurs spéciaux qui permettent de cibler et de styliser des parties spécifiques d'un élément au-delà de la sélection de l'élément entier. Ils offrent une méthode puissante pour ajouter du style à des parties particulières d'un élément, telles que la première ligne, le premier mot, ou même les éléments générés de manière dynamique, sans nécessiter l'ajout de balises HTML supplémentaires.
/* Cibler la première ligne de toutes les balises "p" */
p::first-line { /* Les propriétés... */ }
/* Cibler la première lettre de toutes les balises "p" */
p::first-letter { /* Les propriétés... */ }
/* Cibler la sélection de texte à l'intérieur de toutes les balises "p" */
p::selection { /* Les propriétés... */ }
Les pseudo-éléments ::before et ::after sont quelque peu particuliers. Ils offrent la possibilité de simuler des éléments HTML, agissant comme des conteneurs virtuels capables d'accueillir diverses propriétés CSS, tout comme le ferait une balise classique.
Pour que ces deux pseudo-éléments fonctionnent correctement, il est impératif qu'ils contiennent la propriété content, et sa valeur ne doit ni être assignée à "none", ni à "normal" et elle doit être valide. Pour rappel, cette propriété permet d'ajouter des caractères et même de récupérer les valeurs des attributs présents dans le code HTML.
Notez que par défaut, ces conteneurs virtuels sont configurés avec la propriété display sur "inline", et par conséquent, ils n'ont pas de hauteur.
/* Cibler toutes les balises "p" et leur ajouter les caractères ">>" avant le contenu */
p::before
{
content: ">>";
}
/* Cibler toutes les balises "div" et leur ajouter un cercle rouge translucide en haut à gauche" */
div
{
position: relative;
}
div::after
{
border-radius: 50%;
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 2rem;
height: 2rem;
background-color: rgba(255, 0, 0, 0.2);
}