# 18 Pseudo classes et pseudo éléments

## [#](#pseudoclasses) Pseudoclasses

Une pseudo-catégorie peut être spécialement conçue en CSS, par exemple, lorsque...

* un utilisateur passe la souris sur un élément
* un utilisateur se concentre sur un champ de saisie

La syntaxe des pseudo-classes est...

```css
   selector:pseudo-classe {
     propriété: valeur;
   }
```

Parfois, vous verrez une pseudo-classe avec deux deux-points `::pseudo-classe`. Un ou deux points sont reconnus par le navigateur. Ci-dessus, vous voyez la syntaxe avec un deux-points `:pseudo-classe`.

### [#](#hover) :hover

L'option "survol" est appliquée lorsque l'utilisateur survole un élément.

```html
    <a class="button" href="https://duckduckgo.com">Je suis un bouton</a>
```

```css
    .button {
      padding: 0.5rem 1rem;
      color: white;
      background-color: royalblue;
      border-radius: 0.5rem;
    }
    
    .button:hover {
      background-color: orange;
    }
```

:hand: Tester ce code

### [#](#active) :active

`:active` est appliqué lorsque l'utilisateur maintient le bouton de la souris enfoncé sur l'élément. Cela peut être utilisé, par exemple, pour donner l'impression que quelque chose est "enfoncé" et faire apparaître un bouton de manière haptique.

```html
      <a class="button" href="https://duckduckgo.com">Je suis un bouton</a>.
```

```css
    .button {
      padding: 0.5rem 1rem;
      color: white;
      background-color: royalblue;
      border-radius: 0.5rem;
    }
    
    .button:active {
      background-color: darkblue;
      box-shadow: inset 0 -2px 4px black;
    }
```

:hammer\_pick:Tester ce code

### [#](#focus) :focus

Le terme "focus" s'applique lorsqu'un élément est en focus. La plupart du temps, vous le savez grâce aux champs de saisie, où vous pouvez utiliser la "BTA" pour passer au champ de saisie suivant, et ainsi le "cibler".

```html
    <input class="inputfield" type="text" value="focus me" />
```

```css
    .inputfield:focus {
    border: 4px solid tomato;
    color: royalblue;
}
```

:hammer\_pick: Tester ce code

### :first-child

`:first-child` est appliqué lorsqu'un élément est le premier enfant et permet de le styliser différemment. Dans l'exemple suivant, `li` est le premier enfant de `ul` et obtient donc son propre style.

```html
    <ul class="list">
      <li>place 1</li>
      <li>place 2</li>
      <li>Place 3</li>
    </ul>
```

```css
    li:first-child {
      color: tomato;
      font-weight: bold;
    }
```

:hammer\_pick: Tester ce code

### :last-child

L'expression `:last-child` s'applique lorsqu'un élément est le dernier enfant et permet de lui donner un style différent. Dans l'exemple suivant, le troisième "li" est le dernier enfant de "ul" et a donc son propre style.

```html
    <ul>
      <li>place 1</li>
      <li>place 2</li>
      <li>Place 3</li>
    </ul>
```

```css
    li:last-child {
      color: tomato;
      font-weight: bold;
    }
```

:hammer\_pick: Tester ce code

### :nth-child()

Le fonctionnement de `:nth-child()` est similaire à celui de `:first-child` et `:last-child`. La différence est qu'il permet également de ne sélectionner que le deuxième enfant, voire des règles complexes comme "styliser le premier et un enfant sur deux".

```html
    <ul>
      <li>place 1</li>
      <li>Place 2</li>
      <li>Place 3</li>
      <li>Place 4</li>
      <li>Place 5</li>
    </ul>
```

```css
    li:nth-child(2) {
      color: tomato;
      font-weight: bold;
    }
    
    li:nth-child(3) {
      color: orange;
      font-weight: bold;
    }
```

:hammer\_pick: Tester ce code

Pour faciliter la lecture des listes, il est parfois pratique de mettre en évidence chaque élément impair.

```css
li:nth-child(odd) { /* odd = impaire, even = pair */
background-color: whitesmoke;
}
```

:hammer\_pick:Tester ce code

:link: Liens connexes

* [nième enfant testeur](https://css-tricks.com/examples/nth-child-tester/)
* [documentation sur les pseudo-classes](https://www.w3schools.com/css/css_pseudo_classes.asp) (w3schools.com)

## [#](#pseudoéléments) Pseudoéléments

Les pseudo-éléments peuvent être utilisés pour créer des éléments personnalisés avant et après un élément via le CSS. Vous verrez dans un instant pourquoi cela est utile.

Les différents pays ont des guillemets différents. En Allemagne, les guillemets "texte" sont courants, tandis qu'en Suisse, on utilise "texte".

```html
    <blockquote class="schweiz">
      Le canton de vaud est grand
    </blockquote>
    
    <blockquote class="german">
        Wer zuerst kommt, mahlt zuerst.
    </blockquote>
```

```css
.schweiz:before {
content: "«"; /* L'attribut content doit toujours être présent, sinon :before ou :after ne sera pas reconnu */
color: tomato;
}

.schweiz:after {
content: "»";
color: tomato;
}

.deutschland:before {
content: "„";
color: tomato;
}

.deutschland:after {
content: "“";
color: tomato;
}
```

:hammer\_pick:Tester ce code

Autres :link: Liens

* [Documentation sur les pseudo-éléments](https://www.w3schools.com/css/css_pseudo_elements.asp) (w3schools.com)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cmspilot.gitbook.io/viscom-cie1/18.pseudo_classes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.