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
Style différent des liens visités et non visités
Styliser un élément lorsqu'il obtient le focus
Mouse Over Me
La syntaxe des pseudo-classes :
selector:pseudo-class {
property: value;
}
Les liens peuvent être affichés de différentes manières :
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Remarque : 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-classes ne sont pas sensibles à la casse.
Les pseudo-classes peuvent être combinées avec des classes HTML :
Lorsque vous survolez le lien dans l'exemple, il changera de couleur :
a.highlight:hover {
color: #ff0000;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and font size:</p>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>
Un exemple d'utilisation de la pseudo-classe :hover
sur un élément <div> :
div:hover {
background-color: blue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
Passez la souris sur un élément <div> pour afficher un élément <p> (comme une info-bulle) :
Tada ! Me voici!
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>Hover over this div element to show the p element
<p>Tada! Here I am!</p>
</div>
</body>
</html>
La pseudo-classe :first-child
correspond à un élément spécifié qui est le premier enfant d'un autre élément.
Dans l'exemple suivant, le sélecteur correspond à n'importe quel élément <p> qui est le premier enfant d'un élément :
p:first-child
{
color: blue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<div>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
</body>
</html>
Dans l'exemple suivant, le sélecteur correspond au premier élément <i> de tous les éléments <p> :
p i:first-child
{
color: blue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</body>
</html>
Dans l'exemple suivant, le sélecteur fait correspondre tous les éléments <i> dans les éléments <p> qui sont le premier enfant d'un autre élément :
p:first-child i
{
color: blue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<div>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>
</body>
</html>
La pseudo-classe :lang
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" :
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>
</body>
</html>
Ajouter différents styles aux hyperliens
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<h2>Styling Links</h2>
<p>Mouse over the links and watch them change layout:</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>
</html>
Utilisation de :focus
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Exemple:
a:active
Exemple de description :
Sélectionne le lien actif
Exemple:
input:checked
Exemple de description :
Sélectionne chaque élément <input> coché
Exemple:
input:disabled
Exemple de description :
Sélectionne chaque élément <input> désactivé
Exemple:
p:empty
Exemple de description :
Sélectionne chaque élément <p> qui n'a pas d'enfant
Exemple:
input:enabled
Exemple de description :
Sélectionne chaque élément <input> activé
Exemple:
p:first-child
Exemple de description :
Sélectionne tous les éléments <p> qui sont le premier enfant de son parent
Exemple:
p:first-of-type
Exemple de description :
Sélectionne chaque élément <p> qui est le premier élément <p> de son parent
Exemple:
input:focus
Exemple de description :
Sélectionne l'élément <input> qui a le focus
Exemple:
a:hover
Exemple de description :
Sélectionne les liens au survol de la souris
Exemple:
input:in-range
Exemple de description :
Sélectionne les éléments <input> avec une valeur dans une plage spécifiée
Exemple:
input:invalid
Exemple de description :
Sélectionne tous les éléments <input> avec une valeur non valide
Exemple:
p:lang(it)
Exemple de description :
Sélectionne chaque élément <p> avec une valeur d'attribut lang commençant par "it"
Exemple:
p:last-child
Exemple de description :
Sélectionne tous les éléments <p> qui sont le dernier enfant de son parent
Exemple:
p:last-of-type
Exemple de description :
Sélectionne chaque élément <p> qui est le dernier élément <p> de son parent
Exemple:
a:link
Exemple de description :
Sélectionne tous les liens non visités
Exemple:
:not(p)
Exemple de description :
Sélectionne chaque élément qui n'est pas un élément <p>
Exemple:
p:nth-child(2)
Exemple de description :
Sélectionne chaque élément <p> qui est le deuxième enfant de son parent
Exemple:
p:nth-last-child(2)
Exemple de description :
Sélectionne chaque élément <p> qui est le deuxième enfant de son parent, en comptant depuis le dernier enfant
Exemple:
p:nth-last-of-type(2)
Exemple de description :
Sélectionne chaque élément <p> qui est le deuxième élément <p> de son parent, en comptant depuis le dernier enfant
Exemple:
p:nth-of-type(2)
Exemple de description :
Sélectionne chaque élément <p> qui est le deuxième élément <p> de son parent
Exemple:
p:only-of-type
Exemple de description :
Sélectionne chaque élément <p> qui est le seul élément <p> de son parent
Exemple:
p:only-child
Exemple de description :
Sélectionne chaque élément <p> qui est le seul enfant de son parent
Exemple:
input:optional
Exemple de description :
Sélectionne les éléments <input> sans attribut "obligatoire"
Exemple:
input:out-of-range
Exemple de description :
Sélectionne les éléments <input> avec une valeur en dehors d'une plage spécifiée
Exemple:
input:read-only
Exemple de description :
Sélectionne les éléments <input> avec un attribut "readonly" spécifié
Exemple:
input:read-write
Exemple de description :
Sélectionne les éléments <input> sans attribut "readonly"
Exemple:
input:required
Exemple de description :
Sélectionne les éléments <input> avec un attribut "obligatoire" spécifié
Exemple:
root
Exemple de description :
Sélectionne l'élément racine du document
Exemple:
#news:target
Exemple de description :
Sélectionne l'élément #news actif actuel (cliqué sur une URL contenant ce nom d'ancre)
Exemple:
input:valid
Exemple de description :
Sélectionne tous les éléments <input> avec une valeur valide
Exemple:
a:visited
Exemple de description :
Sélectionne tous les liens visités
Exemple:
p::after
Exemple de description :
Insérer du contenu après chaque élément <p>
Exemple:
p::before
Exemple de description :
Insérer du contenu avant chaque élément <p>
Exemple:
p::first-letter
Exemple de description :
Sélectionne la première lettre de chaque élément <p>
Exemple:
p::first-line
Exemple de description :
Sélectionne la première ligne de chaque élément <p>
Exemple:
::marker
Exemple de description :
Sélectionne les marqueurs des éléments de la liste
Exemple:
p::selection
Exemple de description :
Sélectionne la partie d'un élément sélectionnée par un utilisateur