Back

Les pseudo-classes CSS

Les pseudo-classes en CSS

  1. Objectifs

    • Connaitre les pseudo-classes en CSS
    • Etre capable d’utiliser les pseudo-classes en CSS

  2. Présentation

    • Une pseudo-classe est un mot clé préfixé par deux points (:) qui s’ajoute à un sélecteur CSS pour appliquer un style à un élément dans un cas particulier.
    • Les sélecteurs pseudo-classes permettent d’affecter des styles à ce qui sont, en fait, des classes fantômes qui sont inférées par l’état de certains éléments, ou des modèles de balisage dans le document, ou même par l’état du document ment lui-même.
    • Les pseudo-classes vous permettent d’appliquer CSS en fonction des changements d’état.
    • Voici une liste non exhaustive des pseudo-classes en CSS:
      1. Pseudo-classe :link
      2. Pseudo-classe :visited
      3. Pseudo-classe :active
      4. Pseudo-classe :hover
      5. Pseudo-classe :focus
      6. Pseudo-classe :first-child
      7. Pseudo-classe :nth-child(n)

      Afin que la mise en forme s’applique au mieux, la règle :link doit être placée avant les autres : :link — :visited — :hover — :active. La pseudo-classe :focus est habituellement placée juste avant ou juste après :hover, en fonction de l’effet désiré.

  3. Liste des pseudo-classes standards

    • 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
      • :active
      :any-link
      :blank
      :checked
      :current
      :default
      :defined
      :dir()
      :disabled
      :drop
      :empty
      :enabled
      :first
      :first-child
      :first-of-type
      :fullscreen
      :future
      :focus
      :focus-visible
      :focus-within
      :has()
      :host
      :host()
      :host-context()
      :hover
      :indeterminate
      :in-range
      :invalid
      :is
      :lang()
      :last-child
      :last-of-type
      :left
      :link
      :local-link
      :not()
      :nth-child()
      :nth-col()
      :nth-last-child()
      :nth-last-col()
      :nth-last-of-type()
      :nth-of-type()
      :only-child
      :only-of-type
      :optional
      :out-of-range
      :past
      :placeholder-shown
      :read-only
      :read-write
      :required
      :right
      :root
      :scope
      :target
      :target-within
      :user-invalid
      :valid
      :visited
      :where()

  4. Syntaxe d’une pseudo classe

      5. Une pseudo classe en CSS commence par deux points( :) symbole.
      sélecteur :pseudo-classe {
      /* Styles CSS */
      }

  5. Les Pseudo classes Liens

      • Ce sont les pseudo classes que vous connaissez tous sans savoir que ce sont des pseudo classes. Les voici :
      • :link permet de définir le style d’un lien non visité
      • La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle spécifiée dans son attribut href) n’a pas encore été visitée.
      • La pseudo-classe :link permet de sélectionner les liens à l’intérieur d’éléments.
      • Il est destiné à aider les utilisateurs à faire la différence entre les liens qu’ils ont et ceux qu’ils n’ont pas visités.
      • :visited permet de définir le style d’un lien une fois visité
      • La pseudo-classe CSS :visited permet d’assigner des propriétés CSS à une balise HTML A dont le lien a déjà été visité et à ses fils.
      • Il est destiné à aider les utilisateurs à faire la différence entre les liens qu’ils ont et ceux qu’ils n’ont pas visités.
          • a:visited {
          color: gray;
          }
      • :hover permet de définir le style d’un lien au survol de la souris
      • :active permet de définir le style d’un lien lors d’un clic
      • :focus permet de définir le style d’un lien lors qu’un focus est actif : sélectionné à l’aide du clavier ou activé avec la souris comme par exemple le champ d’un formulaire.

  6. Les Pseudo classes Position

    1. Pseudo-classe :first-child
      • :first-child permet de définir le style du 1er élément enfant par rapport à son parent
      • exemples
          • Supposons que nous avons déclaré le sélecteur suivant span:first-child.
          • Le navigateur appliquera le style associé à toutes les balises <span> qui figurent en tant que premier élément enfant de n’importe quelle balise.
          • Si le code HTML était comme ceci:
            • <div>
   <span>Bonjour</span>
   à
   <span>tous</span>
</div>
          • Alors seule la premier balise s’attribuerait le style décrit dans le sélecteur.
          2. HTML

          • Soit le code HTML suivant:
            •   <p>Ceci est le premier paragraphe.</p>
    <p>Ceci est le deuxième paragraphe.</p>
    <p>Ceci est le troisième paragraphe.</p>
    <p><b>Remarque: </b>Notez que la pseudo-classe n'est appliquée que sur le premier paragraphe.</p>
            CSS

          • On va pouvoir cibler le premier élément p qui est numéro 1 dans la page 
            	p:first-child{
    	background: #05ffb0;
        border: 1px solid;
        padding: 5px;
            • Résultat

            Les pseudo-classes CSS

    2. Pseudo-classe :last-child
      • :last-child permet de définir le style du dernier élément enfant par rapport à son parent
      • La pseudo classe CSS :last-child s’applique sur le dernier élément du type donné.
      • exemples
          1. HTML

          • Soit le code HTML suivant:
            •   <p>Ceci est le premier paragraphe.</p>
    <p>Ceci est le deuxième paragraphe.</p>
    <p>Ceci est le troisième paragraphe.</p>
    <p><b>Remarque: </b>Notez que la pseudo-classe n'est appliquée que sur le premier paragraphe.</p>
            CSS

          • On va pouvoir cibler le dernier élément p qui est numéro 4 dans la page 
            	p:last-child{
    	background: #05ffb0;
        border: 1px solid;
        padding: 5px;
            • Résultat

            Les pseudo-classes CSS

    3. Pseudo-classe :nth-child(n)
      • Le sélecteur :nth-child ("n-ième enfant") vous permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que vous déterminez.
      • Utilisation
        • Le sélecteur correspond à chaque élément qui est le n ème enfant, quel que soit son type, de son parent.:nth-child(n)
        • n peut être un nombre, un mot clé ou une formule.
        • Supposons que nous ayons une table et que nous voulions colorer les cellules selon certaines critères
          • 1 2 3 4 5 6
          7 8 9 10 11 12
          13 14 15 16 17 18
          19 20 21 22 23 24
          25 26 27 28 29 30
          31 32 33 34 35 36
          37 38 39 40 41 42



      • n est un simple chiffre
        • Si un chiffre est spécifié, seul un élément sera sélectionné
        • Exemples
          • tr:nth-child(2) sélectionnerait le deuxième ligne dans notre tableau.
            tr:nth-child(2) {background: #E6F2FF;}

            • Les pseudo-classes CSS

          • td:nth-child(2) sélectionnerait le deuxième colonne dans notre tableau ou plus précisément la deuxième cellule de chaque ligne.
            td:nth-child(2) {background: #E6F2FF;}

            • Les pseudo-classes CSS

      • n est un mots-clés even (pair) ou odd (impair)
        • Si c’est un mot-clé, une itération permettra de sélectionner le ou les éléments correspondants.
        • td:nth-child(even) sélectionnerait touts les cellules pairs dans notre tableau.
          td:nth-child(even) {background: #E6F2FF;}

          • Les pseudo-classes CSS

        • td:nth-child(odd) sélectionnerait touts les cellules impairs dans notre tableau.
          td:nth-child(odd) {background: #E6F2FF;}

          • Les pseudo-classes CSS

      • n est une formule
        • Utiliser une formule ( an + b ). où: a représente une taille de cycle, n est un compteur (commence à 0) et b est une valeur de décalage.
        • Si n est une formule, une itération permettra de sélectionner le ou les éléments correspondants.
        • td:nth-child(3n+0) sélectionnerait toutes les cellules dont l’index est un multiple de 3.
          td:nth-child(3n+0) {background: #E6F2FF;}

        • td:nth-child(5n+3). Cela stipule que tous les 5ème cellules du tableau à partir de la 3ème inclus seront colorées, c’est à dire les cellules numérotés 3, 9, 15, 21, 27, etc.
          td:nth-child(5n+3) {background: #E6F2FF;}

  7. Applications

    • Exercice 01
      • Soit un code html contenant les deux liens suivants :
          • <a https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/les-styles-css/">Exercices CSS</a>
<a https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/python/">Exercices Python</a>
      • Utiliser les pseudo classes “:hover” “:visited” “:active” dans l’ordre convenable afin de définir l’apparence des liens comme suit :
        • Les liens survolés: non soulignés avec un background “#7E3661” et une couleur de texte blanche.
        • Les liens visités : avec une couleur de texte égale à “#FCB941”
        • Les liens (état cliqué) : avec une taille de 1.5em.

    • Exercice 02
      • On considère le tableau html suivant :

        • Les pseudo-classes en CSS

      • Travail à faire :
      • Sans toucher au code HTML, ajoutez à votre feuille style.css les règles qui permettront d’obtenir le résultat souhaitait.
        1. Changer la taille du titre à “16px” en affichant la première lettre de chaque mot en majuscule.
        2. Changer le texte du mois “janvier” pour qu’il soit écrit uniquement en majuscules, en couleur “Bleu”.
        3. Enlever la bordure pour le tableau.
        4. Ajouter une marge interne de 10px et un alignement centré pour toutes les cellules du tableau.
        5. Cibler la deuxième balise “th” de la première “tr” qui contient le mois de l’emploi pour lui changer la taille en “14px” et souligné en couleur rouge.
        6. Mettre en background “#FCB941” tous lignes “tr” du tbody qui viennent en positions paires et en background “#F1654C” les lignes qui viennent en positions impaires (Utiliser le pseudo classe “nth-child”).
        7. Donner à la première cellule de chaque ligne en position impaire ,un background “#7E3661” et une couleur “#fff”.(Utiliser les pseudo classes nth-child et first-child)
        8. Donner à la première cellule de chaque ligne en position paire ,un background “#888888” et une couleur “#fff”.(Utiliser les pseudo classes nth-child et first-child)
        9. Donner à la dernière cellule de chaque ligne en position impaire ,un background “#8870FF” et une couleur “#fff”.(Utiliser les pseudo classes nth-child et last-child)
        10. Enlever la bordure droite et la bordure du haut, de la dernière cellule “th” qui possède un attribut “rowspan” (utiliser le pseudo classe “last-child’ et un sélecteur d’attribut pour “rowspan”.

    • Exercice 03
      • Supposons que vous ayez un formulaire d’inscription par e-mail et que vous souhaitiez que le champ du formulaire e-mail ait une bordure rouge s’il contient une adresse e-mail invalide.
      • Comment tu fais ça? Vous pouvez utiliser une pseudo-classe CSS :invalid, qui est l’une des nombreuses pseudo-classes fournies par le navigateur.



Les combinateurs CSS
Les pseudo-éléments en CSS
author avatar
Riadh HAJJI

Riadh HAJJI

Ces articles pourraient aussi vous intéresser

Les pseudo-éléments en CSS
11 décembre, 2022

Les sélecteurs simples en CSS Les sélecteurs d’attribut en CSS Les combinateurs CSS Les pseudo-classes en CSS Les pseudo-éléments en CSS Exercices en CSS les sélecteurs Série 01 (Correction) Exercices en CSS les sélecteurs Série 02 (Correction) Exercices en CSS …

Examen 5 en HTML , CSS et Bootstrap
19 mai, 2022

Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS Examen 5 en HTML , CSS et Bootstrap Examen 5 en HTML , …

Exercices en CSS les sélecteurs Série 04
1 décembre, 2021

Les sélecteurs simples en CSS Les sélecteurs d’attribut en CSS Les combinateurs CSS Les pseudo-classes en CSS Les pseudo-éléments en CSS Exercices en CSS les sélecteurs Série 01 (Correction) Exercices en CSS les sélecteurs Série 02 (Correction) Exercices en CSS …