Quels sont pseudo-classes?
Une pseudo-classe est utilisée pour définir un état particulier d'un élément.
Par exemple, il peut être utilisé pour:
- Style à un élément lorsqu'un utilisateur passe la souris sur elle
- Style visités et non visités liens différemment
- Coiffez un élément lorsqu'il obtient le focus
Souris Over Me
Syntaxe
La syntaxe des pseudo-classes:
selector:pseudo-class {
property:value;
}Anchor 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 »  | Remarque: a:hover doit venir après a:link et a:visited ! Dans la définition CSS pour être efficace a:active doit venir après a:hover dans la définition CSS pour être efficace!Les noms pseudo-classe ne sont pas sensibles à la casse. |
|---|
Les pseudo-classes et des classes CSS
Les pseudo-classes peuvent être combinées avec des classes CSS:
Lorsque vous survolez le lien dans l'exemple, il va changer de couleur:
Survolez les <div>
Un exemple d'utilisation du :hover pseudo-classe sur un <div> élément:
CSS - Le :first-child pseudo-classe
Le :first-child pseudo-classe correspond à un élément spécifié qui est le premier enfant d'un autre élément.
Faites correspondre le premier <p> élément
Dans l'exemple suivant, le sélecteur correspond à tout <p> élément qui est le premier enfant d'un élément:
Faites correspondre les premiers <i> élément dans l' ensemble <p> éléments
Dans l'exemple suivant, le sélecteur correspond à la première <i> élément dans tous les <p> éléments:
Faites correspondre tous les <i> éléments en tout premier enfant <p> éléments
Dans l'exemple suivant, le sélecteur correspond à tous <i> éléments <p> éléments qui sont le premier enfant d'un autre élément:
CSS - Le :lang Pseudo-classe
Le :lang pseudo-classe vous permet de définir des règles spéciales pour les différentes langues.
Dans l'exemple ci - dessous, :lang définit les guillemets pour <q> é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 » 
Autres exemples
Ajouter des styles différents à des hyperliens
Cet exemple montre comment ajouter d'autres styles d'hyperliens.
Utilisation de :focus
Cet exemple montre comment utiliser le :focus pseudo-classe.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
Toutes les classes CSS Pseudo
| Sélecteur | Exemple | Exemple Description |
|---|---|---|
| :active | a:active | Sélectionne le lien actif |
| :checked | input:checked | Sélectionne tous les vérifier <input> élément |
| :disabled | input:disabled | Sélectionne toutes les personnes handicapées <input> élément |
| :empty | p:empty | Sélectionne tous les <p> élément qui n'a pas d' enfants |
| :enabled | input:enabled | Sélectionne tous les permis <input> élément |
| :first-child | p:first-child | Sélectionne tous les <p> éléments qui est le premier enfant de son parent |
| :first-of-type | p:first-of-type | Sélectionne tous les <p> élément qui est le premier <p> élément de son parent |
| :focus | input:focus | Sélectionne le <input> élément qui a le focus |
| :hover | a:hover | Sélectionne les liens de la souris |
| :in-range | input:in-range | Sélectionne <input> éléments avec une valeur dans une plage spécifiée |
| :invalid | input:invalid | Sélectionne tous les <input> éléments avec une valeur non valide |
| :lang(language) | p:lang(it) | Sélectionne tous les <p> élément avec une valeur d'attribut lang commençant par "it" |
| :last-child | p:last-child | Sélectionne tous les <p> éléments qui est le dernier enfant de son parent |
| :last-of-type | p:last-of-type | Sélectionne tous les <p> élément qui est le dernier <p> élément de son parent |
| :link | a:link | Sélectionne tous les liens non visités |
| :not(selector) | :not(p) | Sélectionne tous les éléments qui ne sont pas un <p> élément |
| :nth-child(n) | p:nth-child(2) | Sélectionne tous les <p> élément qui est le deuxième enfant de son parent |
| :nth-last-child(n) | p:nth-last-child(2) | Sélectionne tous les <p> élément qui est le deuxième enfant de son parent, à compter du dernier enfant |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Sélectionne tous les <p> élément qui est le second <p> élément de son parent, à compter du dernier enfant |
| :nth-of-type(n) | p:nth-of-type(2) | Sélectionne tous les <p> élément qui est le second <p> élément de son parent |
| :only-of-type | p:only-of-type | Sélectionne tous les <p> élément qui est le seul <p> élément de son parent |
| :only-child | p:only-child | Sélectionne tous les <p> élément qui est le seul enfant de son parent |
| :optional | input:optional | Sélectionne <input> éléments sans "required" attribut |
| :out-of-range | input:out-of-range | Sélectionne <input> éléments avec une valeur en dehors d' une plage spécifiée |
| :read-only | input:read-only | Sélectionne <input> éléments avec un "readonly" attribut spécifié |
| :read-write | input:read-write | Sélectionne <input> éléments sans "readonly" attribut |
| :required | input:required | Sélectionne <input> éléments avec un "required" attribut spécifié |
| :root | root | Sélectionne l'élément racine du document |
| :target | #news:target | Sélectionne l'élément de #news actif courant (cliqué sur une URL contenant ce nom d'ancrage) |
| :valid | input:valid | Sélectionne tous les <input> éléments avec une valeur valide |
| :visited | a:visited | Sélectionne tous les liens visités |
Tous les CSS Pseudo Elements
| Sélecteur | Exemple | Exemple Description |
|---|---|---|
| ::after | p::after | Insérez le contenu après chaque <p> élément |
| ::before | p::before | Insérez le contenu avant chaque <p> élément |
| ::first-letter | p::first-letter | Sélectionne la première lettre de chaque <p> élément |
| ::first-line | p::first-line | Sélectionne la première ligne de chaque <p> élément |
| ::selection | p::selection | Sélectionne la partie d'un élément qui est sélectionné par un utilisateur, |