Pseudo-classes CSS

Table des matières

    Afficher la table des matières

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

  • Style différent des liens visités et non visités

  • Styliser un élément lorsqu'il obtient le focus

Mouse Over Me

Syntaxe

La syntaxe des pseudo-classes :

selector:pseudo-class {
  property: value;
}

Ancrer les pseudo-classes

Les liens peuvent être affichés de différentes manières :

Exemple

  /* 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.

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 :

Exemple

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>

Passez la souris sur <div>

Un exemple d'utilisation de la pseudo-classe :hover sur un élément <div> :

Exemple

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>

Survol d'une info-bulle simple

Passez la souris sur un élément <div> pour afficher un élément <p> (comme une info-bulle) :

Tada ! Me voici!

Exemple

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>

CSS - La pseudo-classe :first-child

La pseudo-classe :first-child correspond à un élément spécifié qui est le premier enfant d'un autre élément.

Correspond au premier élément <p>

Dans l'exemple suivant, le sélecteur correspond à n'importe quel élément <p> qui est le premier enfant d'un élément :

Exemple

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>

Faites correspondre le premier élément <i> dans tous les éléments <p>

Dans l'exemple suivant, le sélecteur correspond au premier élément <i> de tous les éléments <p> :

Exemple

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>

Faire correspondre tous les éléments <i> dans tous les premiers éléments <p> enfants

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 :

Exemple

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>

CSS - La pseudo-classe :lang

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" :

Exemple

<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>

Plus d'exemples

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>

Toutes les pseudo-classes CSS

:active

Exemple:

a:active

Exemple de description :

Sélectionne le lien actif

:checked

Exemple:

input:checked

Exemple de description :

Sélectionne chaque élément <input> coché

:disabled

Exemple:

input:disabled

Exemple de description :

Sélectionne chaque élément <input> désactivé

:empty

Exemple:

p:empty

Exemple de description :

Sélectionne chaque élément <p> qui n'a pas d'enfant

:enabled

Exemple:

input:enabled

Exemple de description :

Sélectionne chaque élément <input> activé

:first-child

Exemple:

p:first-child

Exemple de description :

Sélectionne tous les éléments <p> qui sont le premier enfant de son parent

:first-of-type

Exemple:

p:first-of-type

Exemple de description :

Sélectionne chaque élément <p> qui est le premier élément <p> de son parent

:focus

Exemple:

input:focus

Exemple de description :

Sélectionne l'élément <input> qui a le focus

:hover

Exemple:

a:hover

Exemple de description :

Sélectionne les liens au survol de la souris

:in-range

Exemple:

input:in-range

Exemple de description :

Sélectionne les éléments <input> avec une valeur dans une plage spécifiée

:invalid

Exemple:

input:invalid

Exemple de description :

Sélectionne tous les éléments <input> avec une valeur non valide

:lang(language)

Exemple:

p:lang(it)

Exemple de description :

Sélectionne chaque élément <p> avec une valeur d'attribut lang commençant par "it"

:last-child

Exemple:

p:last-child

Exemple de description :

Sélectionne tous les éléments <p> qui sont le dernier enfant de son parent

:last-of-type

Exemple:

p:last-of-type

Exemple de description :

Sélectionne chaque élément <p> qui est le dernier élément <p> de son parent

:link

Exemple:

a:link

Exemple de description :

Sélectionne tous les liens non visités

:not(selector)

Exemple:

:not(p)

Exemple de description :

Sélectionne chaque élément qui n'est pas un élément <p>

:nth-child(n)

Exemple:

p:nth-child(2)

Exemple de description :

Sélectionne chaque élément <p> qui est le deuxième enfant de son parent

:nth-last-child(n)

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

:nth-last-of-type(n)

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

:nth-of-type(n)

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

:only-of-type

Exemple:

p:only-of-type

Exemple de description :

Sélectionne chaque élément <p> qui est le seul élément <p> de son parent

:only-child

Exemple:

p:only-child

Exemple de description :

Sélectionne chaque élément <p> qui est le seul enfant de son parent

:optional

Exemple:

input:optional

Exemple de description :

Sélectionne les éléments <input> sans attribut "obligatoire"

:out-of-range

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

:read-only

Exemple:

input:read-only

Exemple de description :

Sélectionne les éléments <input> avec un attribut "readonly" spécifié

:read-write

Exemple:

input:read-write

Exemple de description :

Sélectionne les éléments <input> sans attribut "readonly"

:required

Exemple:

input:required

Exemple de description :

Sélectionne les éléments <input> avec un attribut "obligatoire" spécifié

:root

Exemple:

root

Exemple de description :

Sélectionne l'élément racine du document

:target

Exemple:

#news:target

Exemple de description :

Sélectionne l'élément #news actif actuel (cliqué sur une URL contenant ce nom d'ancre)

:valid

Exemple:

input:valid

Exemple de description :

Sélectionne tous les éléments <input> avec une valeur valide

:visited

Exemple:

a:visited

Exemple de description :

Sélectionne tous les liens visités

Tous les pseudo-éléments CSS

::after

Exemple:

p::after

Exemple de description :

Insérer du contenu après chaque élément <p>

::before

Exemple:

p::before

Exemple de description :

Insérer du contenu avant chaque élément <p>

::first-letter

Exemple:

p::first-letter

Exemple de description :

Sélectionne la première lettre de chaque élément <p>

::first-line

Exemple:

p::first-line

Exemple de description :

Sélectionne la première ligne de chaque élément <p>

::marker

Exemple:

::marker

Exemple de description :

Sélectionne les marqueurs des éléments de la liste

::selection

Exemple:

p::selection

Exemple de description :

Sélectionne la partie d'un élément sélectionnée par un utilisateur