Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre CSS» Pseudo-classes

Sommaire
  1. Les pseudo-classes CSS c'est quoi ?
  2. Les pseudo-classes dynamiques
    1. Les pseudo-classes de liens
    2. Les pseudo-classes d'action utilisateur
  3. Les pseudo-classes cibles
  4. Les pseudo-classes de langage
  5. Les pseudo-classes de formulaires (ou UI)
  6. Les pseudo-classes de négation
  7. Les pseudo-classes structurelles
  8. Les pseudo-classes de mutabilité
  9. Les pseudo-classes de direction
  10. Quiz sur les pseudo-classes CSS
Télécharger ce cours en pdf

👉 Les pseudo-classes CSS c'est quoi ?

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 :

  • dynamiques
  • cibles
  • de langage
  • de formulaires (ou UI pour User interface)
  • de négation
  • structurelles
  • de mutabilité
  • de direction

A partir du quatrième niveau, les pseudo-classes font partie du module selectors level 4.

👉 Pseudo-classes dynamiques

Parmi les pseudo-classes dynamiques on distingue deux catégories.

Les pseudo-classes de liens :

: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.


Les pseudo-classes d'action utilisateur :

: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.

👉 Pseudo-classes cibles

Parmi les pseudo-classes cibles on distingue :

La pseudo-classe :target (niveau 3) : cible un élément via une ancre.

Cliquez sur le bouton ci-dessous pour faire apparaître un élément caché :

Exemple avec :target
On fait apparaître une 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.


La pseudo-classe :drop() (niveau 4) 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.

Exemple pseudo-classe :drop


<div dropzone="copy file:image/png file:image/gif file:image/jpeg">
Déposez une image ici.
</div> 


👉 Pseudo-classes de langage

Parmi les pseudo-classes de langage on distingue :

:lang() : 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
	
}


👉 Pseudo-classes de formulaire

Parmi les pseudo-classes de formulaire on distingue (liste non exhaustive) :

  • :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.
Exemples avec ces pseudo-classes

👉 Pseudo-classes de négation

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.

  • avec :not
  • un
  • deux
  • trois
  • quatre
  • cinq
  • sans :not
  • un
  • deux
  • trois
  • quatre
  • cinq

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
  
}	
	

👉 Pseudo-classes structurelles

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 (<table>) :

Titre Titre Titre Titre
... ... ...
... ...
... ... ...


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.

Test Image fullscreen


<div id="fullscreen">
<img src="image" alt>
</div>
<button id="bouton_fullscreen">Passer en plein écran</button>




let monBouton  = document.getElementById("votreid");
let ecran_large = document.getElementById("fullscreen");
let fonction_ecran_large = ecran_large.requestFullscreen;
if (!fonction_ecran_large) {
['mozRequestFullScreen',
'msRequestFullscreen',
'webkitRequestFullScreen'].forEach
(function (req) {
fonction_ecran_large = 
fonction_ecran_large || ecran_large[req];
});
}
function enterFullscreen() {
fonction_ecran_large.call(ecran_large);
}
fullscreenButton.addEventListener(
'click', enterFullscreen
); 


Voir un exemple de galerie d'images utilisant cette pseudo-classe.


: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 :

exemple first-child et last-child


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.

exemple first-of-type et last-of-type


<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 / :nth-last-child

: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.

exemple nth-child et nth-last-child
:nth-of-type / :nth-last-of-type
exemple nth-of-type et nth-last-of-type
:only-child / :only-of-type
exemple only-child et only-of-type

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{

....

}

👉 Pseudo-classes de mutabilité :

Les pseudo-classes de mutabilité représentent des éléments dont le contenu est modifiable ou non par l'utilisateur.

La pseudo-classe read-only permet de cibler un élément que l'utilisateur ne peut modifier via l'attribut HTML readonly, tandis que la pseudo-classe read-write permet la modification via l'attribut HTML contenteditable.

exemple pseudo-classes de mutabilité


<p>Texte non modifiable en lecture seule.</p>

<input type="text" value="Champ de saisie en lecture seule (non modifiable)" readonly>




/* contenu non éditable */	

p:-moz-read-only { 

background: silver 

}

p:read-only { 

background: silver 

}


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
	
}


Changez le texte en cliquant ici



<div contenteditable>Changez le texte en cliquant ici</div>





/* contenu éditable */

div:read-write{
	
padding:1rem;
margin:2rem auto;
border:2px dotted
		
	}
	
div:-moz-read-write{
	
padding:1rem;
margin:2rem auto;
border:2px dotted
		
	}


👉 Pseudo-classes de direction :

La pseudo-classe :dir() (niveau 4) (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.

exemple pseudo-classes de direction

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
  
} 


👉 Quiz sur les pseudo-classes CSS

Question : A quelle catégorie la pseudo-classe :link appartient-elle ?


Question : quelle pseudo-classe permet de sélectionner un élément qui reçoit le focus dans un formulaire ?


Question : Quelle pseudo-classe permet de remplir une case à cocher (input) ?


Question : Quel type d'élément la pseudo-classe :empty permet-elle de cibler ?


Question : Quelle valeur de la peudo-classe :nth-child permet de cibler les éléments pairs ?