Une pseudo-classe est un mot-clé qui, ajouté à un sélecteur, va définir l'état d'un élément.
(Sélecteur) ➕ pseudo-classe ➕ valeur = ✔️
Il existe plusieurs groupes de pseudo-classes :
A partir du quatrième niveau, les pseudo-classes font partie du module selectors level 4.
Parmi les pseudo-classes dynamiques on distingue deux catégories.
:link (niveau 1) : cible un lien qui n'a pas encore été visité.
:visited (niveau 1) : cible un lien ayant été visité.
:any-link (niveau 4) : s'applique aux ancres sources des liens hypertexte comme le font les pseudo-classes :link et :visited. Elle permet donc de cibler les éléments tels que a, area ou link avec un attribut href.
:local-link() (niveau 4) : ne vise que les liens internes d'un document.
:active (niveau 1) : cible un lien sur lequel on a cliqué.
:hover (niveau 2.1) : cible un lien sur lequel on passe la souris.
:focus (niveau 2.1) : cible un lien sur lequel on clique.
:focus-within (niveau 4) : permet de sélectionner un élément qui reçoit le focus notamment sur le champ d'un formulaire.
NB : il y a un ordre à respecter pour styler des liens. Plus d'infos dans cet article.
Parmi les pseudo-classes cibles on distingue :
:target (niveau 3)Cette pseudo-classe cible un élément via une ancre.
Cliquez sur le bouton ci-dessous pour faire apparaître un élément caché :
div.
<a href="#ex_target">Exemple avec <code>:target</code></a>
<div id=ex_target>On fait apparaître une div.</div>
#ex_target{
display:none
} /*on cache l'élément. NB : il existe plusieurs manières de cacher un élément*/
#ex_target:target{
margin: 3rem auto;
background-color: #ddd;
display: block
}
NB : L'identifiant doit absolument correspondre à l'ancre.
:drop() (niveau 4)Cette pseudo-classe représente tous les éléments de cible de type glisser-déposer (drag and drop). Elle possède plusieurs états : active, valid ou invalid qui peuvent être stylés en CSS.
Elle fonctionne en corrélation avec l'attribut HTML dropzone.
<div dropzone="copy file:image/png file:image/gif file:image/jpeg">
Déposez une image ici.
</div>
Parmi les pseudo-classes structurelles on distingue :
:matches() (niveau 4)Anciennement : :any(), la pseudo-classe :matches() (voir compatibilité) permet de regrouper des sélecteurs, autrement dit celle-ci revient à alléger le code et vise à moins de répétition.
header h1,
main h1,
footer h1 {
color: red
}
/* revient à écrire */
:matches( header, main, footer) h1 {
color: red
}
:empty (niveau 3)La pseudo-classe :empty : permet de sélectionner des éléments vides.
Un exemple concret avec un tableau (élément HTML table) :
table {
border:1px solid currentcolor;
border-collapse: separate;
border-spacing: .25rem;
width: 100%;
max-width: 100%;
background-color: silver;
}
th,
td{
text-align: center;
border: 1px solid currentcolor;
padding: .5rem
}
td:empty{
background-color: white;
opacity: .4
}
:fullscreen (Fullscreen API)La pseudo-classe :fullscreen cible tout élément actuellement affiché dans un mode plein-écran.
:first-child (niveau 2.1) / :last-child (niveau 3)La pseudo-classe :first-child : cible le premier élément enfant d'un élément (qu'il soit parent ou non).
La pseudo-classe :last-child : cible le dernier élément enfant d'un élément.
Voici une simple liste dont le premier élément sera de couleur rouge et le dernier de couleur verte :
ul :first-child{
color:red
}
ul :last-child{
color:green
}
:first-of-type (niveau 3) / :last-of-type (niveau 3)La pseudo-classe :first-of-type : cible la première occurrence d'un élément dans son conteneur.
La pseudo-classe :last-of-type : cible la dernière occurrence d'un élément dans son conteneur.
Vous allez pouvoir constater la différence avec les pseudo-classes :first-child et :last-child. En effet, dans cet exemple, tous les éléments sont englobés dans un élément parent (à savoir l'élément section entouré d'une bordure noire) vous voyez qu'il y a un titre juste avant le premier paragraphe. Celui-ci n'est donc pas le premier enfant descendant.
<section>
<h1>Titre</h1>
<p>1er Paragraphe</p>
<p>2ème> Paragraphe</p>
<p>3ème Paragraphe</p>
</section>
p:first-of-type{
color: red
}
p:last-of-type{
color: green
}
:nth-child (niveau 3) / :nth-last-child (niveau 3):nth-child (FR) : permet la sélection d'un ou plusieurs éléments suivant leur ordre. Cette pseudo-classe a été revue dans le quatrième niveau (EN) de CSS.
:nth-last-child : cette pseudo-classe repose sur le même principe que la pseudo-classe :nth-child à la différence que le comptage commence par la fin.
:nth-of-type (niveau 3) / :nth-last-of-type (niveau 3)
:only-child (niveau 3) / :only-of-type (niveau 3)
En toute logique, seul le premier paragraphe est ciblé.
<div>
<p>Seul ce paragraphe sera ciblé</p>
</div>
<div>
<p>...</p>
<p>...</p>
</div>
p:only-child,p:only-of-type{
color: white;
background: #7A5FFF
}
:root (niveau 3) :Cette pseudo-classe cible la racine dans un document HTML. Présente la même fonction que le sélecteur html mais à un niveau supérieur.
:root{
....
}
Parmi les pseudo-classes de formulaire on distingue :
:enabled : cible un élément activé.:disabled : cible un élément désactivé.:checked : permet de cocher des éléments tels que des boutons radio (input radio), case à cocher (input checkbox) ou les options d'un select.:valid : permet de styler les éléments d'un formulaire pour indiquer que ceux-ci sont correctement remplis.:indeterminate : cible un élément dont l'état est indéterminé. NB : il n'existe pas d'attribut HTML correspondant.:invalid : permet de styler les éléments d'un formulaire pour indiquer que ceux-ci ne sont pas correctement remplis.:required : permet de mettre en forme des éléments obligatoires d'un formulaire. L'attribut required doit être présent.:optional : comme son nom l'indique, vise les éléments comme étant optionnels et permet de les styler si l'attribut required n'est pas présent.:in-range : cible un élément lorsque la valeur se trouve dans les limites de l'intervalle autorisé pour l'élément.:out-of-range : cible un élément lorsque la valeur se trouve en dehors de l'intervalle autorisé pour l'élément.:placeholder-shown : équivalent CSS (niveau 4) de l'attribut HTML5 placeholder mais différent du pseudo-élément ::placeholder. Permet de sélectionner un input lorsque l'attribut placeholder est rempli.Parmi les pseudo-classes de langage on distingue :
:lang() (niveau 2.1) :Cette pseudo-classe cible un élément dans une langue spécifique.
Par exemple :
.class:lang(fr) {
color: red
}
En recommandation depuis la version 2.1, la pseudo-classe :lang() admet dans le quatrième niveau un sélecteur de caractères génériques, permettant la sélection de plusieurs langues simultanément. Il se présente comme suit :
p:lang(*-fr) {
color: red
}
Parmi les pseudo-classes de négation on distingue :
:not() (niveau 3)
La pseudo-classe :not() cible un élément qui n'est pas égal au sélecteur renseigné entre parenthèses (on parle d'argument). Il est possible de renseigner comme argument n'importe quel sélecteur ainsi que des pseudo-classes mais pas de pseudo-éléments (cela n'aura aucun effet).
La pseudo-classe :not() n'agit pas sur le sélecteur (ou pseudo-classe) puisque justement celui-ci en est exclu. Reprenons ce simple mais bon exemple tiré de cet article (FR) :
Ci-dessous, deux mêmes listes, dont l'une utilise la pseudo-classe :not(). Sur celle qui n'utilise pas la pseudo-classe, vous pouvez remarquer tout en bas un trait gris qui se superpose au trait entourant toute la liste.
Bien entendu, on pourrait supprimer ce trait en écrivant une nouvelle classe ou encore en utilisant la pseudo-classe :last-child :
li.no_border{
border: none;
}
/* ou */
li:last-child {
border: none;
}
C'est donc là où l'on peut voir l'intérêt de la pseudo-classe :not(). On indique que chaque <li> aura une bordure sauf le dernier.
ul li:not(:last-child) {
border-bottom: 1px solid #ccc
}
Dans le troisième niveau, la pseudo-classe :not()(voir compatibilité) n'acceptait qu'un seul sélecteur comme argument. Désormais, dans la quatrième niveau, elle autorise une liste de sélecteurs.
/* Niveau 3 */
p:not(:first-child){
color: red
}
/* Niveau 4 */
p:not(:first-child, :last-child) {
color: red
}
Les pseudo-classes de mutabilité représentent des éléments dont le contenu est modifiable ou non par l'utilisateur.
:read-only (niveau 4) :La pseudo-classe :read-only permet de cibler un élément que l'utilisateur ne peut modifier via l'attribut HTML readonly.
Faîtes le test ci-dessous :
<input type="text" value="Champ de saisie en lecture seule (non modifiable)" readonly>
/* contenu non éditable */
input:-moz-read-only{
display:flex;
border: 1px solid silver;
padding: .5rem;
width:100%;
max-width:20rem
}
input:read-only{
display:flex;
border: 1px solid silver;
padding: .5rem;
width:100%;
max-width:20rem
}
:read-write (niveau 4) :La pseudo-classe read-write permet la modification via l'attribut HTML contenteditable.
Faîtes le test :
Changez le texte en cliquant ici
<div contenteditable>Changez le texte en cliquant ici</div>
:dir() (niveau 4) :La pseudo-classe :dir() (voir compatibilité) permet de cibler un élément selon la direction du texte qu'il contient, correspondant à l'attribut [dir] en HTML mais ne fonctionnant pas de la même façon.
En effet, cette pseudo-classe prend en compte la direction déterminée en HTML selon la langue du document.
Le code ci-dessous :
<p dir="ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed pretium libero. Proin maximus ipsum arcu, eget pretium enim finibus quis.</p>
<p dir="rtl">لوريم إيبسوم دولور سيت أميت، كونسكتيتور أديبيسشينغ إليت. فيفاموس سيد بريتيوم ليبيرو. بروتين ماكسيموس إيبسوم أركو، إغيت بريتيوم إنيم فينيبوس كويس.</p>
/* de gauche à droite */
:dir(ltr) {
color: red
}
/* de droite à gauche */
:dir(rtl) {
color: blue
}