HTML & CSS

CSS pseudo-classes


Que sont les pseudo-classes ?

Une pseudo-classe est utilisée pour définir un état spécial d’un élément.

Par exemple, il peut être utilisé pour :

  • Styliser un élément lorsqu’un utilisateur passe la souris dessus
  • Stylez les liens visités et non visités différemment
  • Styliser un élément lorsqu’il obtient le focus

Syntaxe

La syntaxe des pseudo-classes :

selector:pseudo-classe {
valeur de la propriété;
}


Anchor Pseudo-classes

Les liens peuvent être affichés de différentes manières :

Exemple

/* lien non visité */
un lien {
couleur : #FF0000 ;
}

/* lien visité */
un : visité {
couleur : #00FF00 ;
}

/* souris sur le lien */
un: survolez {
couleur : #FF00FF ;
}

/* lien sélectionné */
un : actif {
couleur : #0000FF ;
}

Essayez-le vous-même »

Note: a:hover DOIT venir après a:link et
a:visited dans la définition CSS pour être efficace ! a:active DOIT venir après
a:hover dans la définition CSS pour être efficace ! Les noms de pseudo-classe ne sont pas sensibles à la casse.



Pseudo-classes et classes HTML

Les pseudo-classes peuvent être combinées avec des classes HTML :

Lorsque vous survolez le lien dans l’exemple, il changera de couleur :


Survolez

Un exemple d’utilisation de la :hover pseudo-classe sur un élément

 :


Info-bulle simple

Survolez un élément

pour afficher un élément

(comme une info-bulle) :

Survolez-moi pour afficher l’élément

.

Tada ! Je suis ici!

Exemple

p {
affichage : aucun ;

couleur de fond : jaune ;
rembourrage : 20px ;
}

div: survolez p {
bloc de visualisation;
}

Essayez-le vous-même »


CSS – La pseudo-classe :first-child

Le :first-child pseudo-class correspond à un élément spécifié qui est le premier enfant d’un autre élément.

Correspond au premier élément

Dans l’exemple suivant, le sélecteur correspond à n’importe quel élément

qui est le premier enfant de n’importe quel élément :


Faites correspondre le premier élément dans tous les éléments

Dans l’exemple suivant, le sélecteur correspond au premier élément de tous les éléments

 :


Faire correspondre tous les éléments dans tous les premiers éléments enfants

Dans l’exemple suivant, le sélecteur correspond à tous les éléments dans les éléments

qui sont le premier enfant d’un autre élément :


CSS – La pseudo-classe :lang

Le :lang pseudo-class vous permet de définir des règles spéciales pour différentes langues.

Dans l’exemple ci-dessous, :lang définit les guillemets pour les éléments avec lang= »no »:

Exemple

q:lang(non) {
guillemets : « ~ » « ~ » ;
}

Du texte Une citation dans un paragraphe Du texte.


Essayez-le vous-même »


Plus d’exemples

Ajouter différents styles aux hyperliens
Cet exemple montre comment ajouter d’autres styles aux liens hypertexte.

Utilisation de :focus
Cet exemple montre comment utiliser la pseudo-classe :focus.



Toutes les pseudo-classes CSS

Sélecteur Exemple Exemple de description
:actif un : actif Sélectionne le lien actif
:vérifié entrée : cochée Sélectionne chaque élément coché
:désactivé entrée : désactivée Sélectionne chaque élément désactivé
:vide p :vide Sélectionne chaque élément

qui n’a pas d’enfant

:activé entrée : activée Sélectionne chaque élément activé
:premier enfant p:premier-enfant Sélectionne tous les éléments

qui sont le premier enfant de son parent

: premier du type p : premier du type Sélectionne chaque élément

qui est le premier élément

de son parent

:se concentrer entrée:mise au point Sélectionne l’élément qui a le focus
:flotter a : survolez Sélectionne les liens au passage de la souris
:dans la gamme entrée:dans la plage Sélectionne les éléments avec une valeur dans une plage spécifiée
:invalide entrée:invalide Sélectionne tous les éléments avec une valeur invalide
:lang(langue) p:lang(it) Sélectionne chaque élément

avec une valeur d’attribut lang commençant par « it »

:dernier enfant p:dernier-enfant Sélectionne tous les éléments

qui sont le dernier enfant de son parent

:dernier du type p:dernier du type Sélectionne chaque élément

qui est le dernier élément

de son parent

:lien un lien Sélectionne tous les liens non visités
:non(sélecteur) :pas p) Sélectionne chaque élément qui n’est pas un élément

:nième-enfant(n) p:nth-enfant(2) Sélectionne chaque élément

qui est le deuxième enfant de son parent

:ntième-dernier-enfant(n) p:nième-dernier-enfant(2) Sélectionne chaque élément

qui est le deuxième enfant de son parent, à partir du dernier enfant

:nième-dernier-du-type(n) p:nième-dernier-du-type(2) Sélectionne chaque élément

qui est le deuxième élément

de son parent, à partir du dernier enfant

:nième de type(n) p:nième-de-type(2) Sélectionne chaque élément

qui est le deuxième élément

de son parent

: uniquement de type p: uniquement de type Sélectionne chaque élément

qui est le seul élément

de son parent

:fils unique p:enfant unique Sélectionne chaque élément

qui est le seul enfant de son parent

:facultatif entrée:facultatif Sélectionne les éléments sans attribut « required »
: hors plage entrée:hors plage Sélectionne les éléments avec une valeur en dehors d’une plage spécifiée
:lecture seulement entrée : lecture seule Sélectionne les éléments avec un attribut « readonly » spécifié
:lire écrire entrée : lecture-écriture Sélectionne les éléments sans attribut « readonly »
:requis entrée :obligatoire Sélectionne les éléments avec un attribut « required » spécifié
:racine racine Sélectionne l’élément racine du document
:cible #actualités : cible Sélectionne l’élément #news actif actuel (cliqué sur une URL contenant ce nom d’ancre)
:valide entrée:valide Sélectionne tous les éléments avec une valeur valide
:a visité un : visité Sélectionne tous les liens visités

Tous les pseudo-éléments CSS

Sélecteur Exemple Exemple de description
::après p :: après Insérer du contenu après chaque élément

::avant p :: avant Insérer du contenu avant chaque élément

::première lettre p :: première-lettre Sélectionne la première lettre de chaque élément

::Première ligne p :: première ligne Sélectionne la première ligne de chaque élément

::marqueur ::marqueur Sélectionne les marqueurs des éléments de la liste
::sélection p :: sélection Sélectionne la partie d’un élément qui est sélectionné par un utilisateur

#CSS #pseudoclasses

Articles similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page