La peuso-classe :target en CSS3 Sélecteur W3C (World Wide Web Consortium)

Publié le 18 février 2008 par Mr32

Certains URIs se réfèrent à un point déterminé dans la page HTML par un identificateur d'ancre www.ab-d.fr/page.html#ancre.

L'élément cible peut être représenté par la pseudo-classe :target en CSS level 3 (Cascading Style Sheets).

Exemple page-css3-target.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>CSS3 *:target</title>
	
	<style type="text/css" media="screen">
	
	h1:hover { text-decoration: underline; } /* CSS 1 et 2 */
	h1:target { background-color: #ff6600; } /* CSS 3 */
	
	</style>
</head>

<body>
	
	<h1 id="title-1">Titre n°1</h1>
	<p>CSS 3...</p>
	<p>CSS 3...</p>
	<p>CSS 3...</p>
	<hr />
	
	<h1 id="title-2">Titre n°2</h1>
	<p>CSS 3...</p>
	<p>CSS 3...</p>
	<p>CSS 3...</p>
	<hr />
	
	<p><a href="#title-1">Titre n°1</a> | <a href="#title-2">Titre n°2</a></p>
	
</body>
</html>

Le sélecteur :target fonctionne pour le moment sur Mozilla Firefox 2, Safari 3, et Opera Browser 9.50