CSS Pseudo-classe

CSS crée des éléments spécifiques :

Exemple classique :

La pseudo-classe :hover est appliquée sur la balise <span>.
Le style span:hover a s'appliquera au lien lorsque l'élément <span> sera survolé par la souris :

<!DOCTYPE html>
<html>
<head>

<style>

p { font-size:36px;}

span:hover a {
	text-decoration: none;
	color: yellow;
	background-color: red;
} 

</style>

</head>

<body>
		<h1>Visitez JUNIA</h1>
		<p>Pour visiter JUNIA,<br/>
		<span>rendez-vous à l'adresse suivante :<br/>
		<a href="http://www.junia.com">http://www.junia.com</a><br/>
		et laissez-vous guider !</span></p>
</body>
</html>
Voir

 

Cette pseudo-classe affectera tous les liens placé dans un span lorsque ce dernier est survollé par le pointeur de souris. Ces liens seront alors, dans notre exemple, sans soulignement et de couleur jaune sur fond rouge.

Classes et pseudo-classes

Les pseudo-classes peuvent être combinées avec les classes CSS :

/* ****************************** */
/* Survol des liens de classe .menu */
/* ****************************** */

a.menu:hover {
	text-decoration: none ;
	color:yellow;
	background-color:red;
} 


/* ****************************** */
/* liens de classe .article */
/* ****************************** */

a.article:link {
	text-decoration : underline ;
}


/* ****************************** */
/* liens, survol et visite de classe .message */
/* ****************************** */

a.message:link {
	text-decoration : underline ;
}
a.message:hover {
	color:green;
}
a.message:visited {
	color:yellow;
	text-decoration : none ;
}

Remarque

Alors que les pseudo-classes :link et :visited n'ont pas de sens d'être utilisées sur une autre balise que la balise A, ce n'est pas le cas de la pseudo-classe :hover qui peut être placée sur la balise BODY et toutes les balises que la balise BODY peut contenir (comme la balise SPAN du premier exemple).

la pseudo-classe :checked

Cette pseudo-classe n'a de sens que sur une balise input pour changer le style quand la case est coché ou le bouton d'option est sélectionné.

input {
	background-color: red;
}

input:checked {
	background-color: green;
}

On peut également agir sur les balises qui suivent une case à cocher ou un bouton d'option, comme dans l'exemple ci-dessous, en combinant avec le sélecteur + :

<!DOCTYPE html>
<html>
<head>
<style>

div { 
	border: 5px solid black;
	width: 400px;
	height: 100px;
}

input + div {
	background-color: red;
}

input:checked + div {
	background-color: green;
}

</style>
</head>
<body>
	<input type="checkbox" />
	<div>
	</div>
</body>
</html>
Voir