Les checkboxes (cases à cocher) sont épatantes, surtout quand vous les combinez avec un CSS astucieux. Cet article vise à montrer quelques petites choses créatives qu’on peut réaliser avec les checkboxes, et _sans JavaScript_.

<h2>La formule de base</h2>

Tout commence avec un peu de HTML :

    //HTML
    <input id="toggle" type="checkbox">
    <label for="toggle">

Rien de bien spécial ici. L’attribut `for` sur le `<label>` correspond à l’`id` qu’on retrouve sur `<input>`, par conséquent lorsqu’on clique sur `<label>` on bascule l’état de la case à cocher `<input>`. C’est important parce que la prochaine étape va consister à cacher la case `<input>`.

    //CSS
    input {
      position: absolute;
      left: -9999px;
    }

Pourquoi ne pas utiliser `display: none`&nbsp;? Parce qu’il serait ignoré par les lecteurs d’écran et la navigation par tabulation. La méthode de décalage de la position permet de garder `<input>` dans le circuit, mais hors écran.

Cacher `<input>` nous facilite le travail. Nous devons toutefois transmettre l’état coché/non coché, ce que nous pouvons faire avec `<label>`. Et c’est ici qu’on commence à s’amuser.

    //CSS
    input:checked + label {
      /* nos styles */
    }

Nous utilisons un mélange de [pseudo-classe :checked](https://developer.mozilla.org/fr/docs/Web/CSS/:checked) et de [combinateur adjacent](/articles/combinateurs-et-pseudo-classes-css/#combinateur-adjacent) (_adjacent sibling_) pour dire ceci&nbsp;: “quand la checkbox est cochée (_checked_), trouver le `<label>` immédiatement consécutif et appliquer nos styles”. Vous pouvez même utiliser des pseudo-éléments ([:before et :after](/articles/les-pseudo-elements-css-before-et-after/)) à l’intérieur de `<label>` pour plus de créativité encore.

    //CSS
    input:checked + label::before {
      /* styles pour un indicateur "on" */
    }

Très bien. Voyons tout cela en action. Cette démo utilise la formule basique dont nous venons de parler pour transformer les cases à cocher habituelles en quelque chose de plus impressionnant.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RPZZPe" src="//codepen.io/lonekorean/embed/RPZZPe?height=300&amp;theme-id=light&amp;slug-hash=RPZZPe&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/RPZZPe/">
  Checkbox Trickery: Simple Toggle</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez que ce qu’il y a de bien, c’est que ça reste des checkboxes. Utilisez-les dans un formulaire et elles le soumettront exactement comme il faut&nbsp;: nous avons modifié leur apparence, pas leur comportement.

<h2 class="softTitleBlue">Cacher et montrer du contenu</h2>

Jusqu’ici, nous avons simplement appliqué quelques styles à `<label>` mais nous pouvons aller plus loin que cela. Cette démo cache et révèle dynamiquement des sections du formulaire en fonction des choix de l’utilisateur.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NqvvGK" src="//codepen.io/lonekorean/embed/NqvvGK?height=640&amp;theme-id=light&amp;slug-hash=NqvvGK&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/NqvvGK/">
  Checkbox Trickery: Form Disclosure</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

La pseudo-classe `:checked` fonctionne avec les boutons radio de la même façon qu’avec les cases à cocher. Voici le code HTML correspondant aux boutons radio “Comment avez-vous entendu parler de nous&nbsp;?” (_How did you hear about us?_)&nbsp;:

    //HTML
    <input id="how-friend" name="how" type="radio">
    <label for="how-friend" class="side-label">From a friend</label>

    <input id="how-internet" name="how" type="radio">
    <label for="how-internet" class="side-label">Somewhere on the internet</label>

    <input id="how-other" name="how" type="radio">
    <label for="how-other" class="side-label">Other...</label>

    <div class="how-other-disclosure">
      <label for="how-other-explain" class="top-label">Please explain</label>
      <textarea id="how-other-explain"></textarea>
    </div>

Le style des boutons radio est réalisé dans `<label>` via une combinaison de `:before` (pour le cercle externe) et `:after` (pour le point vert). Révéler ou cacher `:after` lorsqu’un bouton radio est coché ou décoché est très facile&nbsp;:

    //CSS
    .side-label::after {
      display: none;

      /* autres styles */
    }

    input:checked + .side-label::after {
      display: block;
    }

La `<div>` est cachée jusqu’à ce que le bouton radio “Other...” soit coché. Cette fois-ci, la `<div>` est cachée via `display: none` car je veux que le contenu soit ignoré par les lecteurs d’écran jusqu’à ce qu’il soit effectivement révélé. Le CSS permettant de révéler le contenu de la `<div>` lorsque le bouton radio est coché est le suivant&nbsp;:

    //CSS
    #how-other:checked ~ .how-other-disclosure {
      display: block;
    }

Jusqu’à présent, nous avons utilisé le combinateur adjacent `+` (plus), mais il est temps d’introduire [le combinateur général](https://la-cascade.io/combinateurs-et-pseudo-classes-css/#combinateur-general) `~` (tilde). Il fonctionne un peu de la même manière, mais sur des frères (_siblings_) non adjacents, comme notre `<div>`.

<h2>Arborescence de dossiers</h2>

Nous pouvons réutiliser les techniques de la démo précédente pour créer un widget d’arborescence de dossiers.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNEEpB" src="//codepen.io/lonekorean/embed/eNEEpB?height=640&amp;theme-id=light&amp;slug-hash=eNEEpB&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/eNEEpB/">
  Checkbox Trickery: Folder Tree</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le HTML d’un dossier individuel est donné ci-dessous. Le `<label>` est le dossier et les deux éléments `<a>` sont les “fichiers” à l’intérieur.

    //HTML
    <div>
      <input id="n-1" type="checkbox">
      <label for="n-1">Blue</label>
      <div class="sub">
        <a href="#link">Mana Leak</a>
        <a href="#link">Time Warp</a>
      </div>
    </div>

Des icônes de [Font Awesome](http://fortawesome.github.io/Font-Awesome/) sont utilisées pour indiquer l’état _checked_ (ouvert) ou _unchecked_ (fermé).

    //CSS
    label::before, a::before {
      display: block;
      position: absolute;
      top: 6px;
      left: -25px;
      font-family: ’FontAwesome’;
    }

    label::before {
      content: ’\f07b’; /* closed folder */
    }

    input:checked + label::before {
      content: ’\f07c’; /* open folder */
    }

    a::before {
      content: ’\f068’; /* dash */
    }

Le contenu situé à l’intérieur d’un dossier est montré ou caché via le combinateur général `~`. C’est pourquoi on a une `<div>` supplémentaire pour envelopper chaque dossier, afin d’éviter que le combinateur ne se propage son effet et n’ouvre les autres dossiers.

    //CSS
    input:checked ~ .sub {
      display: block;
    }

Évidemment, les dossiers peuvent être imbriqués. Cliquez sur le dossier “Multicolor” pour en voir un exemple.

Enfin, disons un mot sur notre bouton Reset.

    //HTML
    <input type="reset" value="Collapse All">

Les boutons de Reset de formulaires ne sont plus vraiment utilisés de nos jours, mais nous avons ici un bon cas d’usage. Si nous cliquons dessus, toutes les cases à cocher retournent à leur état initial non-coché, ce qui ferme tous les dossiers. Cool&nbsp;!

<h2>Listes scindées</h2>

Cette démo partage les items en deux listes distinctes, selon qu’ils sont cochés ou non.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xGLLwX" src="//codepen.io/lonekorean/embed/xGLLwX?height=660&amp;theme-id=light&amp;slug-hash=xGLLwX&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="660" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/xGLLwX/">
  Checkbox Trickery: To-Do List</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le HTML ressemble à ceci :

    //HTML
    <div class="items">
      <input id="item1" type="checkbox" checked>
      <label for="item1">Create a to-do list</label>

      

      <h2 class="done" aria-hidden="true">Done</h2>
      <h2 class="undone" aria-hidden="true">Not Done</h2>
    </div>

Le mécanisme de séparation des listes est obtenu via [Flexbox](/tags/flexbox/). Voici le CSS correspondant&nbsp;:

    //CSS
    .items {
      display: flex;
      flex-direction: column;
    }

    .done {
      order: 1;
    }

    input:checked + label {
      order: 2;
    }

    .undone {
      order: 3;
    }

    label {
      order: 4;
    }

CSS Flexbox nous permet de réordonner directement les éléments grâce à la propriété `order`. La valeur de la propriété passe de `4` à `2` lorsque la checkbox est cochée, ce qui la déplace de la partie inférieure “Not Done” vers la partie supérieure “Done”.

Malheureusement, la navigation via le clavier ainsi que [de nombreux lecteurs d’écran](http://sprungmarker.de/wp-content/uploads/css-a11y-group/css-a11y-flexbox.html) suivront l’ordre des éléments dans le DOM, même s’ils ont été visuellement réordonnés avec flexbox. Du coup, les titres “Done” et “Not Done” sont sans utilité pour les lecteurs d’écran —&nbsp;c’est pourquoi j’ai ajouté `aria-hidden="true"` pour eux, mieux vaut qu’ils soient ignorés plutôt que de créer de la confusion. À part cela, la liste scindée est opérationnelle via le clavier et les lecteurs d’écran annonceront l’état d’un item (checked/unchecked).

Si vous êtes intrigués par les compteurs à droite de “Done” et “Not Done”, ils sont générés par des [CSS counters](https://developer.mozilla.org/fr/docs/Web/CSS/Compteurs_CSS), voyez [cet article](http://codersblock.com/blog/fun-times-with-css-counters/) pour plus de détails.

<h2>Filtrage de groupes</h2>

C’est notre dernière démo. Nous allons voir comment mettre en valeur un tri croisé de données correspondant à un critère de sélection.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YXxxyj" src="//codepen.io/lonekorean/embed/YXxxyj?height=660&amp;theme-id=light&amp;slug-hash=YXxxyj&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="660" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/YXxxyj/">
  Checkbox Trickery: Group Filter</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voici le HTML abrégé. Remarquez que l’attribut `data-teams` est une liste d’attributs `id` de boutons radio séparés par un espace. C’est ainsi qu’on fait correspondre les personnages et les équipes.

    //HTML
    <input id="original" type="radio" name="team" checked>
    <label for="original">Original X-Men</label>

    

    <br>
    <ul class="characters">
      <li id="angel" data-teams="original force factor hellfire">
        <h2>Angel</h2>
        <img src="ct-angel.png" alt="">
      </li>

      
    </ul>

En ce qui concerne l’accessibilité, j’utilise des attributs `alt` vides parce que les noms de personnages sont déjà dans les balises `<h2>` —&nbsp;il n’est donc pas nécessaire, ni souhaitable, de les répéter. De plus, puisque je ne cache pas les éléments `<img>` (ils sont seulement rétrécis et décolorés), cela permet aux lecteurs d’écrans de “sauter” les personnages non sélectionnés, il me suffit de cacher la balise `<h2>`.

Voici le CSS qui fait ressortir les personnages lorsque leur équipe est sélectionnée&nbsp;:

    //CSS
    #original:checked ~ .characters [data-teams~="original"] h2,
    #force:checked ~ .characters [data-teams~="force"] h2,
    #factor:checked ~ .characters [data-teams~="factor"] h2,
    #hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
      /* styles to show character name */
    }

    #original:checked ~ .characters [data-teams~="original"] img,
    #force:checked ~ .characters [data-teams~="force"] img,
    #factor:checked ~ .characters [data-teams~="factor"] img,
    #hellfire:checked ~ .characters [data-teams~="hellfire"] img {
      /* styles to show character avatar */
    }

Ok, je reconnais que ces sélecteurs sont un peu touffus, mais en fait ce n’est pas si compliqué. Analysons la ligne 1 par exemple. Si on l’exprime en bon français, ça donne ceci&nbsp;: lorsque l’élément ayant une `id` ‘original’ est coché, chercher le ou les éléments frères (_general sibling_) ayant la classe de ‘personnages’ (_characters_) et contenant un attribut `data-teams` dans lequel se trouve ‘original’, puis aller chercher la balise `<h2>` située à l’intérieur.
On répète avec ‘force’, ‘factor’ et ‘hellfire’ dans les lignes 2 à 4. Enfin, on reproduit le schéma dans le second bloc, mais cette fois-ci pour `<img>` à la place de `<h2>`.

<h3>En guise de conclusion</h3>

J’espère que vous avez eu autant de plaisir à jouer avec ces démos que j’en ai eu à les créer. C’était une expérience très intéressante de voir qu’on pouvait tirer quelque chose d’un élément aussi modeste que les cases à cocher. Je n’ai rien contre l’utilisation de JavaScript, lorsqu’elle est appropriée, mais c’est sympa de voir tout ce qu’on peut accomplir sans JS. Merci d’avoir lu cet article&nbsp;!

Astuces CSS avec checkbox

## Les combinateurs

Comme leur nom le suggère, les combinateurs aident à combiner différents sélecteurs pour former de nouveaux sélecteurs, plus spécifiques.

Il existe quatre types de combinateurs ciblant les relations parent/enfants et frères existant entre les éléments.

### Combinateur descendant E F

Ce premier combinateur est représenté par un _espace_ entre deux éléments, par exemple ul / espace / li&nbsp;:

    ul li

Ce combinateur cible un élément F qui est un descendant de l'élément E. Les combinateurs de descendants ne se limitent pas aux enfants, ils ciblent tous les descendants.

    //HTML

    <ul>
      <li>List Item 1</li>
      <li>List Item 2
        <ol>
          <li>List Item 2-1</li>
          <li>List Item 2-2</li>
        </ol>
      </li>
      <li>List Item 3</li>
    </ul>

    //CSS

    ul li {background: red;}

Toutes les listes auront un background rouge, car chacune est un descendant (enfant ou petit-enfant) de la liste non-ordonnée.

<figure  role="group"><img src="/images/combination-lock-3.jpeg" alt="Un cadenas à code"/></figure>

### Combinateur enfant E > F

Cible un élément F qui est l'enfant d'un élément E. À la différence du combinateur précédent, F doit être un enfant direct de E.

Avec le même HTML que ci-dessus et le CSS&nbsp;:

    ul>li {background: red;}

seuls les List Item 1, 2 et 3 auront un background rouge, car ils sont les enfants de ul, alors que les items 2-1 et 2-2 sont ses petits-enfants.

### Combinateur adjacent E + F

Cible un élément F immédiatement précédé par un élément E. Le mot adjacent est important&nbsp;: seul le **premier** élément après E sera ciblé.

    //HTML

    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    //CSS

    h1+p {font-size: 1.5em;}

Seul le paragraphe 1 aura le style spécifié.

### Combinateur général siblings E ~ F

Cible un élément F précédé par un élément E. À la différence du combinateur adjacent qui cible uniquement le premier frère, celui-ci cible tous les frères (siblings).

Avec le même HTML que ci-dessus et le CSS&nbsp;:

    h1~p {font-size: 1.5em;}

tous les paragraphes auront le même style défini ci-dessus.

### Au-delà des sélecteurs simples

Remarquez bien que vous n'êtes pas limités aux sélecteurs simples. Tous les sélecteurs, y compris les sélecteurs d'attributs, peuvent être employés d'un côté ou de l'autre du combinateur&nbsp;:

    ul a[title]
    li#first>a[rel="external"]
    h1+p.intro
    h2.myclass~p[class="intro"]

<span id="pseudo"></span>

## Les pseudo-classes

Il existe beaucoup de pseudo-classes, le W3C les a regroupées ainsi&nbsp;:

- pseudo-classes dynamiques
- pseudo-classes cibles
- pseudo-classes de langage
- pseudo-classes d'éléments UI (interface utilisateur)
- pseudo-classes de négation
- pseudo-classes structurelles

Vous en connaissez (et utilisez) certaines.

<figure  role="group"><img src="/images/css-selectors.jpeg" alt="des cartes éparpillées sur une table, avec des noms de pseudo-classes écrits."/></figure>

### Pseudo-classes dynamiques

Ce groupe-ci, je suis certain que vous le connaissez déjà. Il s'agit des pseudo-classes relatives aux liens et aux actions utilisateurs.

#### Pseudo-classes de liens

**E:link** cible un élément E qui est la source d'un lien non encore visité.  
**E:visited>** cible un élément E qui est la source d'un lien ayant été visité.

#### Pseudo-classes d'action utilisateur

Ciblent un élément E lors de certaines actions utilisateurs.

**E:active** lorsque le lien est actif (c.à.d lorsqu'on a cliqué dessus)  
**E:hover** lorsque le visiteur passe la souris sur le lien  
**E:focus** lorsque le lien a un focus actif

Je suppose que vous les connaissez suffisamment pour que je n'aie pas besoin d'approfondir. Une chose à garder en mémoire toutefois&nbsp;: lorsque vous utilisez :link, :visited, :hover et :active sur un même élément, rappelez-vous qu'ils doivent être listés dans cet ordre, et pour cela rappelez-vous LoVeHAte&nbsp;!

#### Pseudo-classe de cible

Si vous avez déjà créé une ancre en ajoutant un # à une url, alors vous avez déjà créé une pseudo-classe de cible dans votre html.

**E:target** cible un élément E qui est la cible (appelée ancre) de l'url à laquelle on se réfère.

    //HTML

    <a href="domaine.com/cette-page.html#un-endroit-dans-la-page">...</a>

    

    <span id="un-endroit-dans-la-page"></span>

    //CSS

    span:target {background: yellow;}

Le code ci-dessus place un background jaune derrière le span.

Un cas d'usage intéressant est lorsqu'on veut aider notre lecteur qui a cliqué sur un lien à trouver tout de suite le contenu (le mot, le paragraphe…) correspondant à ce lien.

#### Pseudo-classes de langage

**E:lang(fr)** cible un élément E dans le langage spécifié (ici "fr" = français)

//HTML

    <body lang=fr>
      <p>Je suis français.</p>
    </body>

    //CSS

    p:lang(fr) {color: red;}

Si vous utilisez des langues multiples dans une page, vous avez la possibilité de cibler spécifiquement un texte dans telle ou telle langue.

#### Pseudo-classes d'UI

Pour améliorer l'usabilité des formulaires, on ajoute souvent des contraintes comme permettre ou interdire l'affichage de certains champs en fonction de ce que le visiteur a déjà rempli. Par défaut, les éléments html ne sont ni activés (enabled) ni désactivés (disabled). JavaScript sert typiquement à cela, mais on peut aussi le faire manuellement (quitte à les modifier dynamiquement ensuite).

**E:enabled** cible un élément d'interface utilisateur E qui est activé.

**E:disabled** cible un élément d'interface utilisateur E qui est désactivé.

**E:checked** cible un élément d'interface utilisateur E qui est "checké", comme un bouton-radio ou une checkbox.

//HTML

    <form>
      Preferred Contact:
        <input type="radio" id="prefer" value="email" checked="checked" /> Email
        <input type="radio" id="prefer" value="phone" /> Phone
      Email: <input type="text" id="email" enabled="enabled" />
      Phone: <input type="text" id="phone" disabled="disabled" />
    </form>

    //CSS

    :enabled {color: green;}
    :disabled {color: red;}
    :checked {background: yellow;}

Ici, le rouge et le vert sont utilisés pour signaler aux visiteurs les éléments du formulaire disponibles. Les items checkés ont un background jaune, pour rendre plus visible leur statut de "déjà fait".

Il est probable que nous utiliserions Javascript pour changer les attributs enabled et disabled, selon la méthode choisie par l'utilisateur.

#### Pseudo-classe de négation

La [pseudo-classe de négation](/articles/la-pseudo-classe-de-negation/) fait exactement ce à quoi on peut s'attendre. Avec elle, on cible tout ce qui n'est pas le sélecteur nié.

**[E:not(S)](../not/)** cible un élément E qui n'est pas égal au sélecteur S spécifié entre parenthèses.

    //HTML
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    //CSS
    div:not(.two) {color: orange;}

Le CSS appliquera une couleur orange au texte des première et troisième div, qui n'ont pas la classe "two". C'est simple, mais ça peut devenir rapidement complexe, attention.

Vous trouverez certainement d'autres façons de cibler les éléments que vous voulez sans utiliser le sélection de négation, mais une négation peut remplacer beaucoup de sélecteurs à elle toute seule, elle peut donc être appropriée dans certains cas.
<span id="pseudo-classes"></span>

## Les pseudo-classes structurelles

Les pseudo-classes structurelles ont été introduites afin de pouvoir cibler des éléments html à partir d'informations tirées du [DOM](/articles/le-dom-cest-quoi-exactement/) qui ne peuvent être facilement représentées par de simples sélecteurs ou combinateurs.

Vous en utilisez peut-être déjà certaines. Elles vous éviteront souvent d'ajouter des id ou classes inutiles.

**E:root** cible un élément E qui est la racine du document. En html il s'agit toujours de l'élément html.

    :root {background: blue;}
    html {background: blue;}

Ces lignes de CSS sont fonctionnellement équivalentes. Ok, ce n'est peut-être pas la plus utile des pseudo-classes structurelles, en tout cas c'est la plus simple à expliquer&nbsp;!

**E:nth-child(n)** cible un élément E qui est le n-ième enfant de son parent.

Supposons que nous ayons une table comportant de nombreuses lignes.

    tr:nth-child(4) {background: #ccc;}

Le CSS ci-dessus indique qu'il faut trouver la quatrième ligne et lui donner un background gris clair.

On utilise souvent la pseudo-classe nth-child pour colorer alternativement les lignes d'une table.

    tr:nth-child(2n+1) {background: #ccc;}
    tr:nth-child(2n) {background: #eee;}

2n+1 représente les lignes impaires et 2n les lignes paires. On peut aussi utiliser les valeurs impaire (odd) et paire (even).

    tr:nth-child(odd) {background: #ccc;}
    tr:nth-child(even) {background: #eee;}

Bien entendu vous n'est pas limité à 2&nbsp;:

    tr:nth-child(10n+1) {background: #ccc;}

Ici, les 11e, 21e, 31e, etc lignes auront un background gris clair.

**E:nth-last-child(n)** cible un élément E qui est le n-ième enfant de son parent, en comptant à partir du dernier enfant.

nth-last-child fonctionne comme nth-child, mais en commençant par le dernier élément de la liste. Reprenons notre exemple de table&nbsp;:

    tr:nth-last-child(1) {background: #ccc;}

Ici, c'est la dernière ligne qui aura un background gris clair,

    tr:nth-last-child(4) {background: #ccc;}

et ici c'est la 4ème ligne en partant du bas qui aura ce background.

On peut utiliser les même valeurs&nbsp;:

    tr:nth-last-child(2n+1) {background: #ccc;}
    tr:nth-last-child(2n) {background: #eee;}

    tr:nth-last-child(odd) {background: #ccc;}
    tr:nth-last-child(even) {background: #eee;}

Ces deux façons d'écrire ont le même résultat, des lignes paires et impaires avec un background différent. Il n'est pas sûr que nth-last-child soit la meilleure pseudo-classe pour cet effet, mais vous pouvez l'utiliser.

Une utilisation plus spécifique à nth-last-child est de cibler un ou plusieurs éléments à la fin d'une liste.

<figure  role="group"><img src="/images/ps3numbers-4.jpeg" alt="quelques chiffres dans des nuages"/></figure>

**:nth-of-type et :nth-last-of-type**  
Les autres pseudo-classes structurelles sont des variations de ce qui précède, donc nous allons simplement voir leurs applications spécifiques.

**E:nth-of-type(n)** cible un élément E qui est le n-ième frère du même type.

**E:nth-last-of-type(n)** cible un élément E qui est le n-ième frère du même type, en partant du dernier.

nth-of-type et nth-last-of-type fonctionnent de la même façon que nth-child et nth-last-child, la différence étant qui nous ciblons un type d'élément spécifique et non pas n'importe quel enfant.

On utilise les pseudo-classes "of-type" lorsque le parent de l'élément qu'on cible a plusieurs types d'éléments enfants&nbsp;:

    <div>
     <p></p>
    < img src="" alt="" / >
     <p></p>
      <ul>
        <li></li>
        <li></li>
      </ul>
     <p></p>
    </div>

    //CSS
    p:nth-of-type(2) {font-size: 1.2em;}
    p:nth-last-of-type(1) {font-size: 1.2em;}

Je suis sûr que vous voyez quels paragraphes sont ciblés par le CSS ci-dessus. Et la raison pour laquelle on utilise ici les "of-type" est que les éléments situés dans la div sont de types différents.

**:first-child et :last-child**  
Ce sont en fait des raccourcis pour nth-child(1) et nth-last-child(1), et comme ces deux pseudo-classes, ils sous-entendent que les enfants sont de même type.

**E:first-child** cible un élément E qui est le premier enfant de son parent.

**E:last-child** cible un élément E qui est le dernier enfant de son parent.

On utilise souvent ces pseudo-classes dans les barres de navigation lorsqu'on veut donner un style au premier ou au dernier élément du menu pour les différencier des autres. Ou bien, il arrive fréquemment qu'on ajoute une bordure gauche ou droite aux éléments du menu pour les séparer, mais il faut du coup en ajouter (ou retirer) une d'un côté ou de l'autre. li:last-child ou li:first-child sont pratiques pour y arriver.

**:first-of-type et :last-of-type**  
Ce sont les équivalents fonctionnels de nth-of-type(1) et nth-last-of-type(1). Ils fonctionnent de la même façon que first-child et last-child, sauf qu'ils ciblent des éléments d'un type particulier.

**E:first-of-type** cible un élément E qui est le premier frère de son type.

**E:last-of-type** cible un élément E qui est le dernier frère de son type.

Utilisation typique pour ces pseudo-classes : appliquer un style au premier paragraphe à l'intérieur d'une div, d'un article ou d'une section.

**:only-child et :only-of-type**  
Ciblent des éléments qui n'ont qu'un enfant.

**E:only-child** cible un élément E qui est le seul enfant de son parent.

**E:only-of-type** cible un élément E qui est le seul de son type dans sa fratrie.

**:empty**

**E:empty** cible un élément E qui n'a pas d'enfants, ni de texte. C'est une façon de cibler les attributs vides. Par exemple, il ne ciblerait pas&nbsp;:

    <p>Voici un texte</p>

mais il ciblerait&nbsp;:

    <p></p>

Pour finir, si l'anglais n'est pas un problème voici [une formidable vidéo de Chris Coyier](https://www.youtube.com/watch?v=Konn2NMmSXw) présentant les pseudo-classes et pseudo-éléments.

## Les pseudo-éléments

Parfois nous aimerions appliquer un style à des **éléments** mais nous ne pouvons le faire à partir d'informations tirée du [DOM](/articles/le-dom-cest-quoi-exactement). Nous résolvons le problème en ajoutant un élément (un span par exemple) auquel nous donnons une classe. Dans certains cas, le recours aux **pseudo-éléments** s'avère plus simple.

Nous en avons quatre :

- **:first-line**
- **:first-letter**
- **:before**
- **:after**

**E:first-line** cible la première ligne formatée d'un élément E.

    p:first-line {text-transform: uppercase;}

Le CSS ci-dessus change la première ligne de tous les paragraphes, et bien sûr la _première ligne de texte_ est dynamique si votre mise en page est flexible.

**E:first-letter** cible la première lettre d'un élément E.

Une utilisation évidente serait la création de [lettrines](http://fr.wikipedia.org/wiki/Lettrine)&nbsp;:

    <p class="intro">This is the first paragraph</p>

    //CSS
    p.intro:first-letter {
        font-size:4em;
        font-weight:bold;
        color: #f00;
        float:left;
    }

**E:before et E:after** ciblent un contenu généré avant ou après un élément E.

Une utilisation courante est l'ajout de guillemets stylisés avant et après une citation&nbsp;:

    <blockquote></blockquote>

    //CSS
    blockquote::before {content: "\2018";}
    blockquote::after {content: "\2019;;";}

Pour une approche détaillée de **:before** et **:after**, vous pouvez lire [l'article de Louis Lazaris](/articles/les-pseudo-elements-css-before-et-after/) ici-même.

Combinateurs et pseudo-classes CSS

Créer des formes en CSS


Cet article s'adresse à ceux qui ont découvert les trucs cools qu'on peut faire avec les pseudo-éléments et veulent mieux connaître cette technique. La spécification CSS contient [d'autres pseudo-éléments](http://reference.sitepoint.com/css/pseudoelements), mais je me concentrerai ici sur `:before` et `:after` et pour la simplicité je parlerai de "pseudo-éléments" en me référant spécifiquement à ces deux-là. (<span aria-hidden="true" data-icon="&#9758;"></span>&nbsp;_NdT&nbsp;: pour plus d'infos sur les pseudo-éléments et pseudo-classes, vous pouvez consulter [cet article](/articles/combinateurs-et-pseudo-classes-css/) et pour une plongée en profondeur sur :before et :after [cet autre article](/articles/plongee-en-profondeur-dans-les-pseudo-elements-before-et-after) ici-même_).

## Que fait un pseudo-élément ?

Il fait exactement ce que son nom implique&nbsp;: il crée un élément factice et l'insère avant ou après le contenu de l'élément que vous avez ciblé.

Un pseudo-élément ne change rien dans le document lui-même, en fait il insère des éléments "fantômes" qui sont visibles par l'utilisateur et auxquels on peut appliquer un style CSS.

## Syntaxe basique

Les pseudo-éléments `:before` et `:after` sont très simples à coder, en voici un exemple&nbsp;:

    #exemple:before {
       content: "#";
    }

    #exemple:after {
       content: ".";
    }

Il y a deux choses à noter à propos de cet exemple. D'abord, nous ciblons ici le même élément en utilisant `#exemple:before` et `#exemple:after`. À proprement parler, ce sont les pseudo-éléments dans ce code.

Ensuite, sans la propriété `content` , les pseudo-éléments ne servent à rien. Si le sélecteur pseudo-élément est nécessaire pour cibler l'élément, il n'est pas pour autant suffisant, vous n'insérerez rien tant que vous n'aurez pas ajouté la propriété `content`.

Dans l'exemple que nous venons de voir, on insère un symbole # avant le contenu de l'élément ayant l'id `exemple` et un point après.

## À propos de la syntaxe

Vous pourriez tout aussi bien laisser la propriété `content` vide et traiter le pseudo-élément comme une boîte vide&nbsp;:

    #example:before {
       content: "";
       display: block;
       width: 100px;
       height: 100px;
    }

Toutefois, vous ne pouvez pas supprimer la propriété `content`, le pseudo-élément ne fonctionnerait pas. A minima, la propriété `content` doit contenir des "" vides.

Vous avez peut-être remarqué qu'on peut aussi utiliser la syntaxe `::before` et `::after`. Pour faire bref, il n'y a pas de différence entre les deux syntaxes, c'est juste une façon de différencier les pseudo-éléments et les pseudo-classes en CSS3 mais vous pouvez oublier cette syntaxe.

## Caractéristiques du contenu inséré

Comme déjà mentionné, le contenu inséré n'est pas visible dans les sources de la page (si vous cherchez sur DevTools), il n'est visible que dans le CSS.

De plus, l'élément inséré est par défaut [un élément inline](/articles/la-difference-entre-block-et-inline/). Pour lui donner une hauteur, un padding, des marges, etc, vous devrez le définir explicitement comme un élément block.

Cela nous amène à une brève description de la façon d'appliquer un style à nos pseudo-éléments. Regardons ce graphique tiré de mon éditeur de texte&nbsp;:

<figure><img src="/images/styles-pseudo-elements-compressor.jpeg" alt="display, width, height sont les styles qui affectent le pseudo élément"/></figure>

Dans cet exemple, j'ai surligné les styles qui seront appliqués aux éléments insérés avant et après le contenu de l'élément cible. Les pseudo-éléments ont ceci d'unique qu'on insère le contenu _et_ le style dans le même bloc de déclaration.

Notez également que les règles d'héritage CSS s'appliquent aux éléments insérés. Si par exemple vous avez défini une police de caractères `Helvetica, Arial, sans-serif` pour l'élément `body` de votre document, le pseudo-élément héritera de cette police comme n'importe quel autre élément.

De la même façon, les pseudo-éléments n'héritent pas de styles qui ne sont pas naturellement hérités de leurs parents, tels que les paddings et les marges.

## Avant ou après quoi ?

Notre intuition nous dit que le contenu sera inséré avant et après l'élément cible. Mais comme je l'ai déjà suggéré, ce n'est pas le cas.

Le contenu injecté sera un enfant de l'élément cible, mais il sera placé "avant" ou "après" tout autre contenu dans cet élément.

Pour mieux comprendre, prenons un exemple. Tout d'abord le HTML&nbsp;:

    <p class="box">Other content.</p>

Et maintenant le CSS qui insère le pseudo-élément&nbsp;:

    p.box {
       width: 300px;
       border: solid 1px white;
       padding: 20px;
    }

    p.box:before {
       content: "#";
       border: solid 1px white;
       padding: 2px;
       margin: 0 10px 0 0;
    }

Dans le HTML, tout ce qu'on voit est un paragraphe avec une classe `box`, et les mots "Other content" à l'intérieur (c'est ce que vous verriez si vous inspectiez la source). Dans le CSS, le paragraphe a une largeur, un padding et une bordure visible.

Puis nous avons le pseudo-élément. Il insère un symbole # "avant" le contenu du paragraphe. Le CSS qui suit lui donne une bordure, un padding, des marges.

Et voici le résultat dans notre navigateur&nbsp;:

<figure><img src="/images/autre-contenu-compressor.jpeg" alt="symbole inséré avant le paragraphe, le symbole comporte une bordure, un padding et des marges"/></figure>

La boîte extérieure est notre paragraphe. La bordure qui entoure le symbole # représente les limites de notre pseudo-élément. Autrement dit, celui-ci n'est pas inséré "avant" le paragraphe, il est placé avant "Other content" à l'intérieur du paragraphe.

## Insérer du contenu non-textuel

Nous avons vu que nous pouvions donner à la propriété `content` une valeur textuelle - y compris éventuellement une chaîne de caractères vide (""). Mais nous avons encore deux options possibles.

Tout d'abord, nous pouvons inclure une URL qui pointe vers une image, exactement comme nous le ferions pour inclure une image de background dans le CSS&nbsp;:

    p:before {
       content: url(image.jpg);
    }

Remarquez qu'il n'y a pas de guillemets. Si c'était le cas, cela deviendrait une chaîne de caractères et on insèrerait le texte "url(image.jpg)" comme contenu au lieu d'insérer l'image elle-même.

Bien entendu, nous pouvons inclure une [Data URI](https://www.alsacreations.com/article/lire/1439-data-uri-schema.html) à la place de la référence de l'image, tout comme pour un background CSS.

Nous avons également la possibilité d'inclure une fonction sous la forme `attr(X)`. Selon [les termes de la spécification](http://www.w3.org/TR/CSS2/generate.html#propdef-content), "cette fonction retourne sous forme de chaîne de caractères la valeur de l'attribut X pour le sujet du sélecteur".

Par exemple :

    a:after {
       content: attr(href);
    }

Que fait cette fonction `attr()` ? Elle prend la valeur de l'attribut spécifié (href) et la retourne sous forme de texte, qui sera inséré par le pseudo-élément.

Le code ci-dessus aura pour effet d'afficher sur la page la valeur de `href` de chaque élément `<a>` et de le placer immédiatement après chaque élément `<a>`. Un cas d'usage classique concerne la feuille de style "impression", puisque cela permet d'inscrire en clair l'URL après chaque lien sur les documents imprimés.

Nous pourrions aussi utiliser cette fonction pour aller chercher la valeur de l'attribut `title` d'un élément, ou même les valeurs des [microdonnées](http://fr.wikipedia.org/wiki/Microdonnée). Toutefois, s'il serait pratique d'aller chercher le `title` ou le texte `alt` d'une image pour l'afficher sur la page avec un pseudo-élément, ce n'est pas possible. Rappelez-vous que le pseudo-élément doit être un enfant de l'élément auquel il est appliqué. Les images, qui sont des [éléments vides](http://www.w3.org/TR/html-markup/syntax.html#syntax-elements) (void elements), n'ont pas l'éléments enfants, par conséquent cela ne marche pas. Même chose pour tous les éléments vides, tels que `<input>` (NdT&nbsp;: à part ces deux là, les autres ne sont pas très intéressants).

## Accessibilité

Les pseudo-éléments, on l'a vu, n'apparaissent pas dans le DOM, ils ne sont pas réels. De ce fait, les appareils ou logiciels d'assistance pour les personnes ayant des déficiences ne peuvent pas y accéder. Veillez à ne pas utiliser de pseudo-éléments pour générer un contenu indispensable à l'usabilité ou à l'accessibilité de vos pages.

**Ressources intéressantes sur :before et :after**

[A Single Div](http://a.singlediv.com/), des exemples d'illustrations réalisées à partir d'une simple div et de CSS utilisant `:before` et `:after`, très impressionnant&nbsp;!


La Cascade

pseudo-éléments

Ressources complémentaires sur les pseudo-éléments

Ressources complémentaires en anglais