CSS - Pseudo classes

Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux à certains sélecteurs. Vous n'avez pas besoin d'utiliser JavaScript ou tout autre script pour utiliser ces effets. Une syntaxe simple de pseudo-classes est la suivante -

selector:pseudo-class {property: value}

Les classes CSS peuvent également être utilisées avec des pseudo-classes -

selector.class:pseudo-class {property: value}

Les pseudo-classes les plus couramment utilisées sont les suivantes -

N ° Sr. Valeur et description
1

:link

Utilisez cette classe pour ajouter un style spécial à un lien non visité.
2

:visited

Utilisez cette classe pour ajouter un style spécial à un lien visité.
3

:hover

Utilisez cette classe pour ajouter un style spécial à un élément lorsque vous passez la souris dessus.
4

:active

Utilisez cette classe pour ajouter un style spécial à un élément actif.
5

:focus

Utilisez cette classe pour ajouter un style spécial à un élément pendant que l'élément a le focus.
6

:first-child

Utilisez cette classe pour ajouter un style spécial à un élément qui est le premier enfant d'un autre élément.
sept

:lang

Utilisez cette classe pour spécifier une langue à utiliser dans un élément spécifié.

Lors de la définition de pseudo-classes dans un bloc <style> ... </style>, les points suivants doivent être notés -

  • a: hover DOIT venir après a: link et a: viewed dans la définition CSS pour être efficace.

  • a: active DOIT venir après un: hover dans la définition CSS pour être efficace.

  • Les noms de pseudo-classes ne sont pas sensibles à la casse.

  • Les pseudo-classes sont différentes des classes CSS mais elles peuvent être combinées.

La pseudo-classe: link

L'exemple suivant montre comment utiliser la classe : link pour définir la couleur du lien. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href = "">Black Link</a>
   </body>
</html>

Il produira le lien noir suivant -

La pseudo-classe visitée

Voici l'exemple qui montre comment utiliser la classe : visitée pour définir la couleur des liens visités. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href = "">Click this link</a>
   </body>
</html>

Cela produira le lien suivant. Une fois que vous aurez cliqué sur ce lien, il changera sa couleur en vert.

La pseudo-classe: hover

L'exemple suivant montre comment utiliser la classe : hover pour modifier la couleur des liens lorsque nous plaçons un pointeur de souris sur ce lien. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "">Bring Mouse Here</a>
   </body>
</html>

Il produira le lien suivant. Maintenant, vous amenez votre souris sur ce lien et vous verrez qu'il change sa couleur en jaune.

La: pseudo-classe active

L'exemple suivant montre comment utiliser la classe : active pour modifier la couleur des liens actifs. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href = "">Click This Link</a>
   </body>
</html>

Il produira le lien suivant. Lorsqu'un utilisateur clique dessus, la couleur devient rose.

La pseudo-classe: focus

L'exemple suivant montre comment utiliser la classe : focus pour modifier la couleur des liens focalisés. Les valeurs possibles peuvent être n'importe quel nom de couleur dans n'importe quel format valide.

<html>
   <head>
      <style type = "text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href = "">Click this Link</a>
   </body>
</html>

Il produira le lien suivant. Lorsque ce lien se concentre, sa couleur devient orange. La couleur change quand elle perd le focus.

La pseudo-classe: premier enfant

La pseudo-classe : first-child correspond à un élément spécifié qui est le premier enfant d'un autre élément et ajoute un style spécial à cet élément qui est le premier enfant d'un autre élément.

Pour faire: le travail du premier enfant dans IE <! DOCTYPE> doit être déclaré en haut du document.

Par exemple, pour mettre en retrait le premier paragraphe de tous les éléments <div>, vous pouvez utiliser cette définition -

<html>
   <head>
      <style type = "text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

Il produira le résultat suivant -

La pseudo-classe: lang

La pseudo-classe de langue : lang , permet de construire des sélecteurs basés sur le paramètre de langue pour des balises spécifiques.

Cette classe est utile dans les documents qui doivent faire appel à plusieurs langues ayant des conventions différentes pour certaines constructions de langage. Par exemple, la langue française utilise généralement des chevrons (<et>) pour les guillemets, tandis que la langue anglaise utilise des guillemets ('et').

Dans un document qui doit aborder cette différence, vous pouvez utiliser la pseudo-classe: lang pour modifier les guillemets de manière appropriée. Le code suivant modifie la balise <blockquote> en fonction de la langue utilisée -

<html>
   <head>
      <style type = "text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang = "fr">A quote in a paragraph</q>...</p>
   </body>
</html>

Les sélecteurs: lang s'appliqueront à tous les éléments du document. Cependant, tous les éléments n'utilisent pas la propriété quotes, donc l'effet sera transparent pour la plupart des éléments.

Il produira le résultat suivant -