Les pseudo-classes CSS
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 des 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 –
Valeur Descriptions
:link Utilisez cette classe pour
ajouter un style spécial à un lien non visité.
:visited
Utilisez
cette classe pour ajouter un style spécial à un lien visité.
:hover Utilisez cette classe
pour ajouter un style spécial à un élément lorsque dsdsdsdsdsdsdsdsdsdsvous
passez la souris dessus.
:active Utilisez cette classe
pour ajouter un style spécial à un élément actif.
:focus Utilisez cette classe
pour ajouter un style spécial à un élément xxxxxxxxxxxxxxxxxxxxpendant
que l'élément a le focus.
:first-child Utilisez cette classe pour
ajouter un style spécial à un élément qui xxxxxxxxxxxxxxxxxxxx est
le premier enfant d'un autre élément.
:lang Utilisez cette classe
pour spécifier une langue à utiliser dans un sssssssssssssssssssssssé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: visited dans la définition CSS afin
d'être efficace.
- a: active doit venir après a: hover dans la définition CSS afin
d'être efficace.
- Les noms de pseudo-classe 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:green}
</style>
</head>
<body>
<a href="">Exemple d’un lien avec couleur noir </a>
</body>
</htm
Exemple
d’un lien avec couleur noir
La pseudo-classe visited :
L'exemple suivant
montre comment utiliser la classe: visited 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: green}
</style>
</head>
<body>
<a href=""> Cliquez sur ce lien </a>
</body>
</html>
Cliquez sur ce lien
La pseudo-classe hover :
L'exemple suivant
montre comment utiliser la classe: hover pour changer la couleur des liens lorsque nous
mettons 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: orange}
</style>
</head>
<body>
<a href=""> survol la souris ici </a>
</body>
</html>
Il produira le lien suivant. Maintenant vous survolez
votre souris sur ce lien et vous verrez qu'il change sa couleur en orange.
survol la souris ici
La
pseudo-classe active :
L'exemple suivant
montre comment utiliser la classe active pour changer 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="">cliquer sur ce lien </a>
</body>
</html>
La
pseudo-classe focus:
L'exemple
suivant montre comment utiliser la classe: focus
pour modifier la couleur des liens ciblé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="">cliquer sur ce lien</a>
</body>
</html>
Il produira le lien
suivant. Lorsque ce lien est focalisé, sa couleur devient orange. La couleur
change quand elle perd le focus.
Cliquer sur ce lien
La pseudo-classe
du premier enfant - first-child :
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 décaler 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> Premier paragraphe de la div.
Ce paragraphe sera indenté </p>
<p> Deuxième paragraphe de la div.
Ce paragraphe ne sera pas indenté </p>
</div>
<p> Mais il ne correspondra pas au paragraphe
dans cette page HTML:</p>
<div>
<h3> Titre </h3>
<p> Le premier paragraphe de la div.
Ce paragraphe ne sera pas effectué.</p>
</div>
</body>
</html>
Résultat :
Premier paragraphe de la div. Ce paragraphe sera
indenté
Deuxième paragraphe de la div. Ce paragraphe ne sera pas indenté Mais il ne correspondra pas au paragraphe dans cette page HTML:
Titre
Le premier paragraphe de la div. Ce paragraphe ne sera pas effectué.La pseudo-classe : lang :
La pseudo-classe de langage: lang, permet de construire des sélecteurs en fonction du paramètre de langue pour des balises spécifiques.
Cette classe est utile dans les documents qui doivent faire appel à plusieurs langues qui ont des conventions différentes pour certaines constructions de langage. Par exemple, la langue française utilise typiquement des crochets (<et>) à des fins de citation, tandis que la langue anglaise utilise des guillemets («et»).
Dans un document qui doit résoudre 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> de façon appropriée pour la langue utilisée –
<html>
<head>
<style type="text/css">
/* Deux niveaux de devis pour deux langues */
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang="fr"> Une citation dans un paragraphe </q>...</p>
</body>
</html>
Il produira le résultat suivant -
... << Une citation dans un paragraphe >> ...
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment