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.
Un exemple d’utilisation de la :hover pseudo-classe sur un élément
Info-bulle simple
Survolez un élément
(comme une info-bulle) :
.
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.