Que sont les pseudo-classes CSS ? Introduction détaillée aux pseudo-classes CSS-tutoriel CSS-php.cn

Que vous soyez débutant ou développeur CSS expérimenté, vous avez probablement entendu parler des pseudo-classes. La pseudo-classe la plus célèbre est probablement :hover, qui nous permet de styliser les éléments lorsqu'ils sont en survol lorsqu'un périphérique de pointage (comme une souris) est pointé dessus.

Suite à notre précédente introduction sur margin: auto et CSS Floats, nous examinons de plus près les pseudo-classes dans cet article. Nous verrons ce que sont les pseudoclasses, comment elles fonctionnent, comment nous les classons et en quoi elles diffèrent des pseudoéléments. (Tutoriel recommandé : Tutoriel vidéo CSS)

Que sont les pseudo-classes ?

Une pseudo-classe est un élément HTML sur lequel on peut sélectionner un mot-clé pour définir un état spécial afin d'ajouter du CSS. Nous pouvons ajouter des pseudo-classes aux sélecteurs CSS en utilisant la syntaxe deux-points, comme ceci : a:hover{ ... }

Une classe CSS est quelque chose que nous pouvons ajouter au HTML que nous voulons appliquer, avec le même style. règles L'attribut de titre d'un élément, tel qu'un élément de menu supérieur ou un widget de barre latérale. En d’autres termes, nous pouvons utiliser des classes CSS pour regrouper ou catégoriser des éléments HTML qui sont similaires d’une manière ou d’une autre. Les pseudo-classes

sont similaires dans le sens où elles sont également utilisées pour ajouter des règles de style aux éléments partageant les mêmes caractéristiques.

Cependant, alors que la vraie classe est définie par l'utilisateur et peut être découverte dans le code source, par exemple, en fonction de l'état actuel de l'élément HTML auquel elle appartient, un UA (User Agent) (tel en tant que navigateur Web) ajoute < ;div class="myClass">Pseudo classe.

Les pseudo-classes et pseudo-éléments peuvent être utilisés dans les sélecteurs CSS mais n'existent pas dans le code source HTML. Au lieu de cela, ils sont « insérés » par l'UA sous certaines conditions pour être adressés dans la feuille de style.

Objectif des pseudo-classes

Le travail des classes CSS régulières est de classer ou de regrouper des éléments. Les développeurs savent comment leurs éléments sont regroupés : ils peuvent former des classes telles que "éléments de menu", "boutons", "vignettes", etc. pour les regrouper, puis styliser des éléments similaires. Ces classifications sont basées sur les caractéristiques des éléments données par les développeurs eux-mêmes.

Par exemple, si un développeur décide d'utiliser un objet

comme objet miniature, il peut le classer à l'aide de la classe

<div class="thumbnail">[...]</div>

Copier après la connexion

Cependant, les éléments HTML ont des caractéristiques communes basées sur leur état, leur position, leur nature et leur interaction avec la page et l'utilisateur. Ce sont des caractéristiques qui ne sont généralement pas marquées dans le code HTML, mais on peut utiliser des pseudo-classes en CSS pour les localiser, par exemple :

1 Un élément qui est le dernier enfant de son élément parent. Élément

2. Lien consulté

3. Un élément en plein écran.

Ce sont les caractéristiques que les pseudo-classes ciblent généralement. Pour mieux comprendre la différence entre les classes et les pseudo-classes, supposons que nous utilisons la classe .last pour identifier le dernier élément d'un conteneur parent différent.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

Copier après la connexion

Nous pouvons styliser ces derniers éléments enfants en utilisant le CSS suivant :

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

Copier après la connexion

Mais que se passe-t-il lorsque le dernier élément change ? Eh bien, nous devons déplacer la classe .last de l'élément précédent vers l'élément actuel.

La tâche de mettre à jour les classes peut être laissée à l'agent utilisateur, au moins pour les traits qui sont communs entre les éléments (et le dernier élément est aussi commun que possible). Avoir la pseudo-classe prédéfinie :last-child est vraiment utile. De cette façon, nous n'avons pas besoin d'indiquer les derniers éléments dans le code HTML, mais nous pouvons toujours les styliser en utilisant le CSS suivant :

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

Copier après la connexion

Type principal de pseudo-classe

Il existe de nombreux types de pseudo-classes, et elles nous offrent toutes des moyens de localiser des éléments en fonction de leurs caractéristiques inaccessibles ou difficiles d'accès. Ceci est une liste de pseudo-classes standard dans MDN.

1. Pseudo-classes dynamiques

Les pseudo-classes dynamiques sont ajoutées et supprimées dynamiquement des éléments HTML en fonction de l'état dans lequel elles évoluent en réponse à l'interaction de l'utilisateur. Quelques exemples de pseudo-classes dynamiques sont , , , et , qui peuvent toutes être ajoutées aux balises d'ancrage. :hover:focus:link:visited

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

Copier après la connexion

2 Les pseudo-classes basées sur l'état

Les pseudo-classes basées sur l'état sont ajoutées lors de l'entrée. un état statique spécifique dans l'élément. Certains des exemples les plus célèbres sont :

: coché peut être appliqué aux cases à cocher ()

: plein écran localise l'affichage actuel en mode plein écran.

:disabledL'élément HTML peut être en mode désactivé, tel que ,