Pseudo-elements CSS-classes (pseudo-classes)

Les sélecteurs de pseudo-classes CSS correspondent à des composants en fonction de conditions autres que celles définies dans l'arbre du document. Une pseudo-classe CSS est un mot-clé ajouté à un sélecteur pour spécifier un état spécial de l'élément à sélectionner. Par exemple, :hover peut être utilisé pour changer la couleur d'un bouton lorsque l'utilisateur le survole avec la souris.

Qu'est-ce qu'une pseudo-classe

Les pseudo-classes CSS permettent de définir les styles dynamiques des éléments, tels que le survol, l'état actif et l'état de focus, ainsi que les éléments existants dans l'arbre du document mais qui ne peuvent pas être ciblés par d'autres sélecteurs, sans ajouter de sélecteurs leur ID ou leur classe, par exemple, pour le premier ou le dernier élément fils.

Pseudo-classes start with a colon (:). Their syntax can be given in the following way:

The following section describes the most commonly used pseudo-classes.

Anchor pseudo-classes

UsingAnchorPseudo-class links can be displayed in different ways:

These pseudo-classes allow you to style unvisited links and visited links. The most common styling technique is to remove the underline from visited links.

a:link {
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Some anchor pseudo-classes are dynamic-They are applied due to user interaction with the document (such as hover or focus, etc.).

a:hover {
　　　　color: red;
}
a:active {
　　　　color: gray;
}
a:focus {
　　　　color: none;
}

These pseudo-classes change the way links respond to user operations.

• :hover Applies when the user places the cursor on an element but does not select it.

• :active Applies when an element is activated or clicked.

• :focus Applies when an element has keyboard focus.

:first-pseudo-class

:first-The pseudo-class child matches the elements that are the first child of some other elements. ol li:first-In the following example, the selector selects the first list item of an ordered list and removes the border from the top of it.

ol li:first-child {
　　　　border-top: none;
}

:last-pseudo pseudo-class

:last-The pseudo-class child matches the elements that are the last child of some other elements. Below ul li:last-The selector in the child example selects the last list item from the unordered list and removes the right border from it.

ul li:last-child {
　　　　border-right: none;
}

：nth-pseudo-class

a été introduite dans CSS3Une nouvelle pseudo-classe :nth-La pseudo-classe child permet de cibler un ou plusieurs sous-objets spécifiques d'un élément parent donné. La syntaxe de base de cette sélection peut être combinée avec :nth-child(N), où N est un paramètre qui peut être un nombre, un mot-clé (even ou odd) ou une expression de forme xn+y, où x et y sont des entiers (par exemple1n,2n,2n+1,...).

table tr:nth-child(2n) td {
　　　　background: #eee;
}

Les règles de style dans l'exemple précédent mettent en évidence les cellules de tableau au lieu d'ajouter des ID ou des classes à l'élément.

Pseudo-classe :lang

La pseudo-classe :lang permet de construire des sélecteurs en fonction de la langue spécifiée par les balises spécifiques. Voici un exemple de pseudo-classe :langDes éléments définis pour des valeurs de langage claires sont définis par des guillemets no.

q:lang(no) {
　　　　quotes: "~" "~";
}
/*　Code HTML fragment　*/Some text A quote in a paragraph Some text.

Pseudo-classes et classes CSS

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

class="red" dans l'exemple suivant, les liens affichés seront en rouge.

a.red:link {　　　　/*　règle de style　*/
　　　　color: #ff0000;
}
<a class="red" href="#">Cliquez-moi</a>　　　　/*　Code HTML fragment　*/