
La propriété `align-items` est liée à la mise en page CSS. Elle affecte la façon dont les éléments sont alignés à la fois **dans les mises en page [Flexbox](/articles/flexbox-guide-complet) et [Grid](/articles/css-grid-layout-guide-complet)**.

- [align-items dans Flexbox](/articles/flexbox-guide-complet#align-items)
- [align-items dans Grid](/articles/css-grid-layout-guide-complet#ai)

## Syntaxe

```css
align-items: flex-start | flex-end | center | baseline | stretch;
```

La propriété `align-items` définit le comportement par défaut pour la disposition des éléments le long de l'axe transversal (perpendiculaire à l'axe principal).

Imaginez une mise en page flexbox horizontale. Ce flux horizontal est l'axe _principal_, donc align-items est l'alignement _opposé_ à celui-ci, sur l'axe _vertical_. Gardez à l'esprit que ça change évidemment lorsque l'axe principal change, et que l'axe transversal change avec lui.

Vous pouvez considérer `align-items` comme la version `justify-content` pour l'axe transversal (perpendiculaire à l'axe principal).

<p class="is-style-explanation">Le reste de cet article est plutôt axé sur flexbox plutôt que sur grid. Les concepts sont toujours très similaires, mais il existe quelques différences. Par exemple, dans flexbox, les axes peuvent changer, alors que dans grid ils ne le peuvent pas. Ça a pour conséquence par exemple le fait que flexbox a des valeurs comme `flex-start` alors que dans grid, c'est juste `start`.</p>

## Démo (flexbox)

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_AvXmrQ/2bfe2c024739bdd4098572f87d1bf585" src="//codepen.io/KittyGiraudel/embed/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585?height=640&amp;theme-id=light&amp;slug-hash=AvXmrQ/2bfe2c024739bdd4098572f87d1bf585&amp;user=KittyGiraudel&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/KittyGiraudel/pen/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585">
  CSS-Tricks: :nth-last-child</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-items


La propriété `align-self` est une sous-propriété du module Flexible Box Layout. Elle permet de remplacer la valeur [align-items](/articles/align-items) pour des éléments flex spécifiques.

La propriété `align-self` accepte les 5 mêmes valeurs que la propriété `align-items`.

## Syntaxe

```css
align-self: auto | flex-start | flex-end | center | baseline | stretch
  .flex-item {
  align-self: flex-end;
}
```

## Démo

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_GBMZKR" src="//codepen.io/team/css-tricks/embed/GBMZKR?height=340?&amp;theme-id=light&amp;slug-hash=GBMZKR&amp;user=team/css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="340" 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/team/css-tricks/pen/GBMZKR">
  align-self demo</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-self

## Introduction

Les éléments HTML peuvent être dotés d'attributs qui servent à tout, depuis l'ajout d'informations sur l'accessibilité jusqu'au contrôle stylistique.

```html


<div class="names" role="region" aria-label="Names"></div>
```

Ce qui est _déconseillé_, c'est d'_inventer_ vos propres attributs, ou de réaffecter des attributs existants pour une fonctionnalité sans rapport.

```html

<div highlight="true"></div>


<div width="large"></div>
```

C'est pas bien, et pour des tas de raisons. Votre HTML devient invalide, ce qui peut ne pas avoir de conséquences négatives réelles, mais vous prive de ce sentiment rassurant et flou d'avoir un HTML valide. La raison la plus convaincante est que le **HTML est un langage vivant** et ce n'est pas parce que des attributs et des valeurs ne font rien aujourd'hui qu'ils ne feront rien demain.

Bonne nouvelle cependant : vous pouvez créer vos propres attributs. Il vous suffit de les préfixer avec `data-*` et ensuite vous êtes libre de faire ce qui vous plaît&nbsp;!

## Syntaxe

Il est très pratique de pouvoir créer nos propres attributs HTML et d'y placer nos propres informations. Et c'est possible&nbsp;! c'est même exactement ce que sont les **data attributes** ([attributs de données](https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes)). Ils sont comme ceci&nbsp;:

```html

<div data-foo></div>


<div data-size="large"></div>


<li data-prefix="Attention au HTML ici."></li>
<li>
  
  <aside data-some-long-attribute-name><aside></aside></aside>
</li>
```

Les data attributes sont souvent appelés attributs `data-*`, car ils sont toujours formatés de cette façon. Le mot `data`, puis un tiret `-`, puis un autre texte que vous pouvez inventer.

### Pouvez-vous utiliser l'attribut data seul ?

```html
<div data=""></div>
```

Cela ne va probablement pas faire de mal, mais vous n'obtiendrez pas l'API JavaScript que nous verrons plus tard dans ce guide. Vous vous créez essentiellement un attribut pour vous-même, ce qui, comme je l'ai mentionné dans l'introduction, est _déconseillé_.

#### Ce qu'il ne faut pas faire avec les data attributes

Stockez du contenu qui doit être accessible. Si le contenu doit être vu ou lu sur une page, ne le mettez pas seulement dans des data attributes, mais assurez-vous que ce contenu se trouve quelque part dans le contenu HTML.

```html

<div data-name="Chris Coyier"></div>


<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>
```

Voici plus d'informations sur le [masquage des choses](/articles/cacher-des-elements-avec-css).

## Stylisation avec des data attributes

CSS peut [sélectionner des éléments HTML sur la base d'attributs](https://css-tricks.com/almanac/selectors/a/attribute/) et de leurs valeurs.

```css
/* Sélectionner tout élément ayant cet attribut de données et cette valeur */
[data-size='large'] {
  padding: 2rem;
  font-size: 125%;
}

/* Vous pouvez l'étendre à un élément, une classe ou n'importe quoi d'autre */
button[data-type='download'] {
}
.card[data-pad='extra'] {
}
```

Cela peut être convaincant. Les principaux _hooks_ de style en HTML/CSS, ce sont les **classes**, et bien que les classes soient excellentes (elles ont une spécificité moyenne et de belles méthodes JavaScript via `classList`), un élément en est doté ou non, c'est l'un ou l'autre, (essentiellement _activé_ ou _désactivé_). Avec les attributs `data-*`, vous obtenez cette capacité d'activation/désactivation, **_et_** la possibilité de sélectionner en fonction de la valeur qu'il possède au même niveau de spécificité.

```css
/* Sélectionne si l'attribut est présent du tout */
[data-size] {
}

/* Sélectionne si l'attribut a une valeur particulière */
[data-state='open'],
[aria-expanded='true'] {
}

/* Sélecteur "Commence par", ce qui signifie que cela correspond à "3" ou à tout ce qui commence par 3, comme "3.14" */
[data-version^='3'] {
}

/* "Contient" signifie que la valeur contient la chaîne de caractères n'importe où à l'intérieur */
[data-company*='google'] {
}
```

### La spécificité des sélecteurs d'attributs

C'est exactement la même chose qu'une classe. Nous pensons souvent à la spécificité comme à une valeur en quatre parties&nbsp;:

style en ligne, IDs, classes/attributs, balises.

Ainsi, un sélecteur d'attribut seul est **0, 0, 1, 0**. Un sélecteur comme celui-ci&nbsp;:

```css
div.card[data-foo='bar'] {
}
```

... serait **0, 0, 2, 1** — le 2 est dû au fait qu'il y a une classe (`.card`) et un attribut (`[data-foo="bar"]`), et le 1 est dû au fait qu'il y a une balise (`div`).



<figure role="group"><img src="/images/specificity-selector.webp" alt="schéma montrant la spécificité : une div (spécificité = 1) avec une classe (specificité = 1) et un attribut de données avec une valeur (spécificité = 1)"/><figcaption>Illustration d'un sélecteur CSS incluant un attribut data.</figcaption></figure>

Les sélecteurs d'attributs ont moins de spécificité qu'un ID, plus qu'un élément/balise, et la même chose qu'une classe.

### Valeurs d'attributs insensibles à la casse

Au cas où vous auriez besoin de corriger d'éventuelles incohérences de capitalisation dans vos data attributes, le sélecteur d'attribut dispose d'une variante insensible à la casse pour cela.

```html

[data-state="open" i] { }
```

C'est le petit `i` à l'intérieur du sélecteur entre crochets.

### Utilisation visuelle des data attributes

CSS vous permet d'extraire la valeur de l'attribut de données et de l'afficher si nécessaire.

```css
/* <div data-emoji="✅"> */

[data-emoji]::before {
  content: attr(data-emoji); /* Retourne '✅' */
  margin-right: 5px;
}
```

### Exemple de cas d'utilisation du style

Vous pourriez utiliser des data attributes pour spécifier le nombre de colonnes que vous souhaitez pour un conteneur de grille.

```html
<div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_rNaEvgp" src="//codepen.io/chriscoyier/embed/rNaEvgp?height=500&amp;theme-id=light&amp;slug-hash=rNaEvgp&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="500" 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/chriscoyier/pen/rNaEvgp">
  Data Attribute Based Columns</a> de chriscoyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Accéder aux data attributes en JavaScript

Comme tout autre attribut, vous pouvez accéder à la valeur avec la méthode générique `getAttribute`.

```js
let value = el.getAttribute('data-state')

// Vous pouvez également définir la valeur.
// Returns data-state="collapsed"
el.setAttribute('data-state', 'collapsed')
```

Mais les data attributes ont également leur propre API spéciale. Admettons que vous ayez un élément avec plusieurs data attributes (ce qui est tout à fait ok) :

```html
<span
  data-info="123"
  data-index="2"
  data-prefix="Dr. "
  data-emoji-icon="🏌️♀️"
></span>
```

Si vous avez une référence à cet élément, vous pouvez définir (_set_) et obtenir (_get_) les attributs comme suit :

```js
// GET
span.dataset.info // 123
span.dataset.index // 2

// SET
span.dataset.prefix = 'M. '
span.dataset.emojiIcon = '🎪'
```

Notez l'utilisation du camelCase dans la dernière ligne. Elle convertit automatiquement les attributs de style kebab en HTML, comme `data-this-little-piggy`, en style camelCase en JavaScript, comme `dataThisLittlePiggy`.

Cette API n'est sans doute pas aussi agréable que [`classList`](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) avec ses méthodes claires d'ajout, de suppression, de basculement (_toggle_) et de remplacement, mais c'est mieux que rien.

Vous avez également accès aux ensembles de données en ligne :

```html
<img src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
```

### Données JSON à l'intérieur des data attributes

```html
<ul>
  <li
    data-person='
    {
      "nom" : "Chris Coyier",
      "job" : "Personne Web"
    }
  '
  ></li>
</ul>
```

Hé, pourquoi pas ? Ce n'est qu'une chaîne de caractères et il est possible de la formater en [JSON](/articles/json-pour-les-debutants) valide (attention aux guillemets et autres). Vous pouvez extraire ces données et les parser selon vos besoins.

```js
const el = document.querySelector('li')

let json = el.dataset.person
let data = JSON.parse(json)

console.log(data.name) // Chris Coyier
console.log(data.job) // Personne Web
```

### Cas d'utilisation de JavaScript

Le concept est que vous pouvez utiliser les data attributes pour mettre dans le HTML des informations auxquelles JavaScript peut avoir besoin d'accéder pour faire certaines choses.

Un cas courant serait lié à la fonctionnalité de la base de données. Disons que vous avez un bouton "J'aime" :

```html
<button data-id="435432343">♡</button>
```

Ce bouton pourrait être doté d'un _click handler_ qui exécute une requête Ajax vers le serveur pour incrémenter le nombre de _j'aime_ dans une base de données à chaque clic. Il sait quel enregistrement mettre à jour car il l'obtient du data attribute.

### Spécifications

- [Sélecteurs niveau 4](https://drafts.csswg.org/selectors-4/#attribute-selectors) (projet)
- [Sélecteurs niveau 3](https://drafts.csswg.org/selectors-3/#attribute-selectors) (recommandé)
- [Sélecteurs de niveau 2](https://www.w3.org/TR/CSS2/selector.html#attribute-selectors), révision 1 (définition initiale)

Data attributes, guide complet


Le sélecteur `:first-of-type` en CSS vous permet de cibler la première occurrence d'un élément dans son conteneur. Il est défini dans la spécification CSS Selectors Level 3 comme une "pseudo-classe structurelle", ce qui signifie qu'il est utilisé pour styliser le contenu en fonction de sa relation avec le contenu parent et frère.

Supposons que nous ayons un article avec un titre et plusieurs paragraphes&nbsp;:

```html
<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>
```

Nous voulons agrandir le premier paragraphe, comme une sorte de paragraphe d'introduction. Au lieu de lui donner une classe, nous pouvons utiliser `:first-of-type` pour le sélectionner&nbsp;:

```css
p:first-of-type {
  font-size: 1.25em;
}
```

L'utilisation de `:first-of-type` est très similaire à `:nth-child` mais avec une différence essentielle&nbsp;: **elle est moins spécifique**. Dans l'exemple ci-dessus, si nous avions utilisé `p:nth-child(1)`, rien ne se serait produit car le paragraphe n'est pas le premier enfant de son parent (l'`<article>`). Cela révèle la puissance de `:first-of-type`&nbsp;: il cible un type d'élément particulier dans une disposition particulière par rapport aux frères et sœurs similaires, et non pas tous les frères et sœurs.

L'exemple plus complet ci-dessous démontre l'utilisation de `:first-of-type` et d'un sélecteur de pseudo-classe connexe, `:last-of-type`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_DwGXKv" src="//codepen.io/zakkain/embed/DwGXKv?height=500&amp;theme-id=light&amp;slug-hash=DwGXKv&amp;user=zakkain&amp;default-tab=result" scrolling="no" frameborder="0" height="500" 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/zakkain/pen/DwGXKv">
  CSS-Tricks: :first-of-type and :last-of-type</a> de zakkain dans <a href="https://codepen.io">CodePen</a></span>
</div>


:first-of-type


La propriété `flex-grow` est une sous-propriété du module Flexible Box Layout.

Elle définit la capacité d'un élément flex à croître si nécessaire. Elle accepte une valeur sans unité qui sert de proportion. Elle dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'élément doit occuper.

```css
.element {
  flex-grow: 2;
}
```

Par exemple, si tous les éléments ont la valeur `flex-grow` définie sur 1, chaque enfant aura une taille égale à l'intérieur du conteneur. Si vous donnez à l'un des enfants une valeur de 2, cet enfant occupera deux fois plus d'espace que les autres.

## Syntaxe

```css
flex-grow: <number>;
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_krMwzK/9a9ad8fb040f5efaf4e749b49cae7281" src="//codepen.io/KittyGiraudel/embed/krMwzK/9a9ad8fb040f5efaf4e749b49cae7281?height=300&amp;theme-id=light&amp;slug-hash=krMwzK/9a9ad8fb040f5efaf4e749b49cae7281&amp;user=KittyGiraudel&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/KittyGiraudel/pen/krMwzK/9a9ad8fb040f5efaf4e749b49cae7281">
  Flex-grow: demo</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>

Tous les éléments ont une valeur `flex-grow` de 1, sauf le 3e qui a une valeur `flex-grow` de 2. Cela signifie que lorsque l'espace disponible est distribué, le 3e élément flex aura deux fois plus d'espace que les autres.


flex-grow

grid-column

grid-row

grid-template-areas


La propriété `justify-content` est une sous-propriété du module Flexible Box Layout.

Elle définit l'alignement le long de l'axe principal. Elle permet de répartir l'espace libre restant lorsque tous les éléments flexibles d'une ligne sont inflexibles, ou sont flexibles mais ont atteint leur taille maximale. Elle exerce également un certain contrôle sur l'alignement des éléments lorsqu'ils débordent de la ligne.

La propriété `justify-content` accepte six valeurs différentes :

- `flex-start` (_valeur par défaut_) : les éléments sont alignés sur la ligne de départ.
- `flex-end` : les éléments sont regroupés vers la ligne de fin
- `center` : les éléments sont centrés le long de la ligne
- `space-between` : les éléments sont répartis uniformément sur la ligne ; le premier élément est sur la ligne de début, le dernier élément sur la ligne de fin.
- `space-around` : les articles sont répartis uniformément sur la ligne avec un espace égal autour d'eux.
- `space-evenly` : les éléments sont répartis de manière à ce que l'espacement entre deux sujets d'alignement adjacents, avant le premier sujet d'alignement et après le dernier sujet d'alignement soit le même.

## Syntaxe

```css
justify-content: flex-start | flex-end | center | space-between |
  space-around | space-evenly .flex-item {
  justify-content: center;
}
```

## Démo

La démo suivante montre comment les éléments flex se comportent en fonction de la valeur `justify-content`&nbsp;:

- La liste rouge est définie sur flex-start
- La liste jaune est réglée sur flex-end
- La liste bleue est réglée sur center
- La liste verte est réglée sur space-between
- La liste rose est réglée sur space-around
- Le vert clair est réglé sur space-evenly

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_zzJMGJ" src="//codepen.io/team/css-tricks/embed/zzJMGJ?height=600&amp;theme-id=light&amp;slug-hash=zzJMGJ&amp;user=team/css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="600" 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/team/css-tricks/pen/zzJMGJ">
  Flexbox & justify-content</a> de team/css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


justify-content


Le sélecteur `:last-of-type` nous permet de cibler la dernière occurrence d'un élément à l'intérieur de son élément parent. Il est défini dans la spécification [Selectors Level 4](https://www.w3.org/TR/selectors/) comme une "pseudo-classe structurelle", c'est à dire qu'il est utilisé pour ajouter un style à un contenu en fonction de sa relation avec son élément parent ou ses éléments frères.

Admettons que nous ayons un article qui comporte un titre, plusieurs paragraphes et une image&nbsp;:

```html
<article>
  <h1>Un Titre</h1>

  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <img src="..." />
</article>
```

Nous voulons que le dernier paragraphe soit affiché en plus petit, pour apparaître comme une conclusion (comme une note du rédacteur). Plutôt que de l'associer à une classe, nous pouvons utiliser `:last-of-type` pour le sélectionner&nbsp;:

```css
p:last-of-type {
  font-size: 0.75em;
}
```

`:last-of-type` fonctionne à peu près comme `:nth-of-child` mais avec une différence essentielle&nbsp;: il est [moins spécifique](/articles/la-difference-entre-nth-child-et-nth-of-type). Dans l'exemple qui précède, si nous avions utilisé `p:nth-last-child(1)`, il ne se serait rien passé car le paragraphe n'est pas le dernier enfant de son élément parent. C'est là qu'apparaît la puissance de `:last-of-type` : il cible un type particulier d'élément dans un arrangement spécifique, _en relation avec des enfants similaires, plutôt qu'avec tos les enfants_.

L'exemple plus complexe qui suit montre l'utilisation de `:last-of-type` et d'une pseudo-classe qui lui ressemble, `:first-of-type`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_DwGXKv" src="//codepen.io/zakkain/embed/DwGXKv?height=500&amp;theme-id=light&amp;slug-hash=DwGXKv&amp;user=zakkain&amp;default-tab=result" scrolling="no" frameborder="0" height="500" 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/zakkain/pen/DwGXKv">
  :first-of-type and :last-of-type</a> de Sara Cope dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voir également [la page de MDN](https://developer.mozilla.org/fr/docs/Web/CSS/:last-of-type)


:last-of-type

Le sélecteur `:nth-child` (&ldquo;n-ième enfant&rdquo;) permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que vous déterminez. La spécification W3C le range parmi les &ldquo;pseudo-classes structurelles&rdquo;, ce qui signifie qu'il est utilisé pour appliquer un style au contenu en fonction de ses relations avec les éléments parents et enfants.

Supposons que nous ayons une grille CSS et que nous voulions retirer la marge sur chaque quatrième module&nbsp;:

    //HTML
    <section class="grid">
      <article class="module">One</article>
      <article class="module">Two</article>
      <article class="module">Three</article>
      <article class="module">Four</article>
      <article class="module">Five</article>
    </section>

Plutôt que d'ajouter une classe à chaque quatrième item, nous pouvons utiliser `:nth-child`&nbsp;:

    //CSS
    .module:nth-child(4n) {
      margin-right: 0;
    }

Comme vous le voyez, `:nth-child` prend un argument (c'est le n-ième enfant, mais il faut bien préciser comment on détermine ce _n_). Cela peut être un simple chiffre, les mots-clés `even` (pair) ou `odd` (impair), ou bien une formule.

Si un chiffre est spécifié, seul _un_ élément sera sélectionné, par exemple `:nth-child(2)` sélectionnerait le deuxième module dans notre HTML ci-dessus.

Si c'est un mot-clé ou une formule, une itération permettra de sélectionner le ou les éléments correspondants. Par exemple, `:nth-child(even)` sélectionnerait les modules 2 et 4. `:nth-child(3n+1)` séléctionnerait les modules 1 et 4.

Au passage, on voit ici que `:nth-child(even)` est l'équivalent de `:nth-child(2n)` et `:nth-child(odd)` est l'équivalent de `:nth-child(2n+1)` - sachant que lorsque la valeur de l'argument est inférieure ou égale à zéro, il n'y a pas de sélection. Inférieure à zéro&nbsp;? Oui, car on pourrait très bien utiliser une formule du type `:nth-child(2n-1)` et pour n=0 on aurait un argument égal à -1. Dans ce cas, aucun élément ne serait sélectionné.

Pour illustrer tout ceci, voici quelques exemples de sélecteurs `:nth-child`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ALiBx" src="//codepen.io/zakkain/embed/ALiBx?height=650&amp;theme-id=light&amp;slug-hash=ALiBx&amp;user=zakkain&amp;default-tab=result" scrolling="no" frameborder="0" height="650" 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/zakkain/pen/ALiBx/">
  CSS-Tricks: :nth-child</a> by Zachary Kain <a href="https://codepen.io">CodePen</a></span>
</div>

**À noter**

- `:nth-child` procède par itération en commençant par le début de la liste. C'est la seule différence avec `:nth-last-child` qui commence par la fin de la liste.
- le sélecteur `:nth-child` est très proche de `:nth-of-type` mais avec une différence essentielle&nbsp;: il est [moins spécifique](../nth-of-type). Dans notre premier exemple, il donnerait le même résultat parce que nous ne faisons d'itérations que sur les éléments `.module`, mais si nous avions un groupe plus complexe, `:nth-child` essaierait de cibler _tous_ les éléments frères (siblings) et non pas les éléments frères limités au même type. C'est un point important à retenir concernant la puissance de `:nth-child`&nbsp;: il sélectionne tous les éléments frères et non pas seulement ceux qui sont spécifiés avant les deux-points `:`. Vous pouvez consulter [l'article `:nth-of-type`](../nth-of-type) pour plus de détails sur la différence entre les deux.<span id="diffspecificity"></span>

**Allons plus loin sur la différence entre les deux**

Prenons le HTML suivant&nbsp;:

    //HTML
    <section>
       <p>Petit</p>
       <p>Cochon</p>    
    </section>

Les deux CSS qui suivent parviendraient au même résultat&nbsp;:

    //CSS
    p:nth-child(2) { color: red; }

    p:nth-of-type(2) { color: red; }

Et pourtant il y a une différence. En bon français, le sélecteur `:nth-child` nous dit de sélectionner un élément _si_&nbsp;:

1. c'est un élément paragraphe
2. c'est le second enfant d'un parent (quel qu'il soit)

Le sélecteur `:nth-of-type`, lui, dit ceci&nbsp;:

1. sélectionner le second paragraphe enfant d'un parent (quel qu'il soit)

`:nth-of-type` est… comment dire… _moins conditionnel_.

Admettons que notre balisage soit maintenant&nbsp;:

    //HTML
    <section>
       <h1>Mots</h1>
       <p>Petit</p>
       <p>Cochon</p>    
    </section>

Ce CSS ne fonctionne plus&nbsp;:

    //CSS
    p:nth-child(2) { color: red; }

Celui-ci fonctionne encore :

    //CSS
    p:nth-of-type(2) { color: red; }

Quand je dis qu'il ne fonctionne plus, je veux dire que le sélecteur `:nth-child` sélectionne maintenant _Petit_ au lieu de _Cochon_, parce que cet élément répond à la fois à la condition (1) être le deuxième enfant (de `<section>`) et (2) être un élément paragraphe.

Et quand je dis que le deuxième fonctionne encore, je veux dire que c'est bien _Cochon_ qui est sélectionné, parce que c'est le deuxième paragraphe à l'intérieur de cet élément parent `<section>`.

Si nous ajoutions un `<h2>` après le `<h1>`, le sélecteur `:nth-child` ne sélectionnerait plus rien du tout parce que maintenant le deuxième enfant n'est plus un paragraphe. Le sélecteur `:nth-of-type` quant à lui fonctionnerait toujours.

Mon sentiment est que le sélecteur `:nth-of-type` est moins fragile et plus utile en règle générale, même si `:nth-child` est plus courant apparemment. Vous vous dites sans doute parfois &ldquo;je veux sélectionner le second enfant d'un parent si c'est un paragraphe&rdquo;, mais il y a des chances que vous vouliez plutôt &ldquo;sélectionner le deuxième paragraphe&rdquo; ou &ldquo;sélectionner une ligne sur trois dans le tableau&rdquo;, et ce sont là des cas où `:nth-of-type` (à mon avis) est un meilleur choix.

Dernière chose : je me suis rendu compte que la plupart de mes moments de &ldquo;_mais pourquoi ce #@/$!!! de :nth-child ne marche pas ??_&rdquo; venaient du fait que j'avais qualifié le sélecteur avec la balise. Donc lorsque j'utilise `:nth-child` je préfère en général spécifier le parent et ne pas qualifier `:nth-child`&nbsp;:

    //CSS
    dl :nth-child(2) {  } /* est préférable à */
    dd:nth-child(2) {  } /* ceci */

Mais bien sûr, tout dépend de la situation exacte.

**Quelques recettes**

Il existe quelques "testeurs" de `:nth-child` que vous pouvez vous amuser à utiliser :

[CSS-Tricks nth-child tester](http://css-tricks.com/examples/nth-child-tester/#)  
[Le testeur de Lea Verou](http://lea.verou.me/demos/nth.html)  
[Nth-Test](http://nth-test.com/) de Paul Maloney

Vous pouvez tester les **recettes** suivantes :

👉🏾 Sélectionner uniquement le cinquième élément&nbsp;:

    //CSS
    li:nth-child(5) {
        color: green;
    }

👉🏾 Sélectionner tous les éléments sauf les 5 premiers&nbsp;:

    //CSS
    li:nth-child(n+6) {
        color: green;
    }

👉🏾 Sélectionner seulement les 5 premiers éléments&nbsp;:

    //CSS
    li:nth-child(-n+5) {
        color: green;
    }

👉🏾 Sélectionner un élément sur quatre, en commençant par le premier&nbsp;:

    //CSS
    li:nth-child(4n-7) {  /* or 4n+1 */
        color: green;
    }

---

Autres ressources à consulter sur ce sujet&nbsp;:

- MDN : [:nth-child](https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child)
- [Référence SitePoint](http://www.sitepoint.com/web-foundations/nth-childn-css-selector/) (en anglais)
- [CSS Reference Codrops](http://tympanus.net/codrops/css_reference/nth-child/) (en anglais)
- [Wiki W3C](http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:nth-child) (en anglais)
- [Spécification W3C](http://dev.w3.org/csswg/selectors3/#structural-pseudos) (en anglais)

Autres articles intéressants&nbsp;:

**articles en français** :

- [Le sélecteur :nth-child](http://www.grafikart.fr/tutoriels/html-css/css-nth-child-168), vidéo par Grafikart

**articles en anglais** :

- [nthmaster](http://nthmaster.com/), quelques exemples complexes d'utilisation des pseudo-classes structurelles **:nth**
- [Usefil :nth-child recipes](https://css-tricks.com/useful-nth-child-recipies/), de Chris Coyier, quelques recette utiles

:nth-child


Le sélecteur `:nth-last-child` nous permet de sélectionner un ou plusieurs éléments en fonction de leur ordre d'origine, selon une formule. Il est défini dans la spécification CSS Selectors Level 3 comme une "pseudo-classe structurelle", ce qui signifie qu'il est utilisé pour styliser le contenu en fonction de sa relation avec les éléments parents et frères et sœurs. Il fonctionne de la même manière que `:nth-child`, sauf qu'il sélectionne les éléments en commençant par le bas de l'ordre de la source, et non par le haut.

Supposons que nous ayons une liste avec un nombre inconnu d'éléments et que nous souhaitions mettre en évidence l'avant-dernier élément, dans cet exemple précis, le quatrième élément ("Fourth Item")&nbsp;:

```html
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>
```

Plutôt que d'ajouter une classe à l'élément de la liste (par exemple, `.highlight`), nous pouvons utiliser `:nth-last-child`&nbsp;:

```css
li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}
```

Comme vous pouvez le voir, `:nth-last-child` prend un argument&nbsp;: il peut s'agir d'un seul nombre entier, des mots-clés "even" (pair) ou "odd" (impair), ou d'une formule. Si un nombre entier est spécifié, un seul élément est sélectionné —&nbsp;mais les mots-clés ou une formule vont itérer à travers tous les enfants de l'élément parent et sélectionner les éléments correspondants&nbsp;— ce qui est similaire à la navigation dans un tableau en JavaScript. Les mots-clés "even" et "odd" sont simples (2, 4, 6 etc. ou 1, 3, 5 respectivement). La formule est construite à l'aide de la syntaxe `an+b`, où&nbsp;:

- "a" est une valeur entière
- "n" est la lettre "n" littérale
- "+" est un opérateur et peut être soit "+", soit "-".
- "b" est un nombre entier et est requis si un opérateur est inclus dans la formule

Il est important de noter que cette formule est une équation, et itère à travers chaque élément frère, déterminant celui qui sera sélectionné. La partie "n" de la formule, si elle est incluse, représente un ensemble d'entiers positifs croissants (tout comme l'itération dans un tableau). Dans notre exemple ci-dessus, nous avons sélectionné un élément sur deux avec la formule 2n, ce qui a fonctionné car à chaque fois qu'un élément était vérifié, "n" augmentait d'une unité (2×0, 2×1, 2×2, 2×3, etc.). Si l'ordre d'un élément correspond au résultat de l'équation, il est sélectionné (2, 4, 6, etc.). Pour une explication plus approfondie des mathématiques impliquées, veuillez lire cet article.

Pour illustrer davantage, voici quelques exemples de sélecteurs :nth-last-of-type valides :

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_nORPOZ" src="//codepen.io/zakkain/embed/nORPOZ?height=640&amp;theme-id=light&amp;slug-hash=nORPOZ&amp;user=zakkain&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/zakkain/pen/nORPOZ">
  CSS-Tricks: :nth-last-child</a> de zakkain dans <a href="https://codepen.io">CodePen</a></span>
</div>

Heureusement, vous ne devez pas toujours faire les calculs vous-même. Il existe plusieurs testeurs et générateurs de type `:nth-of`&nbsp;:

- [Testeur CSS-Tricks](https://css-tricks.com/examples/nth-child-tester/#)
- [Testeur de Léa Verou](https://lea.verou.me/demos/nth.html)

## À noter

- `:nth-last-child` itère à travers les éléments en commençant par le bas de l'ordre source. La seule différence entre lui et `:nth-child` est que ce dernier parcourt les éléments en commençant par le haut de l'ordre des sources.
- Le sélecteur `:nth-last-child` est très similaire à `:nth-last-of-type` mais avec une différence essentielle&nbsp;: il est moins spécifique. Dans notre exemple ci-dessus, ils produiraient le même résultat car nous n'itérons que sur les éléments `li`, mais si nous itérions sur un groupe plus complexe de frères et sœurs, `:nth-last-child` essaierait de faire correspondre tous les frères et sœurs, et pas seulement les frères et sœurs du même type d'élément. Ceci révèle la puissance de `:nth-last-child`&nbsp;: il peut sélectionner n'importe quel élément frère dans un arrangement, et _pas seulement les éléments spécifiés avant les deux points_.


:nth-last-child

:nth-last-of-type


Le sélecteur `:nth-of-type` nous permet de sélectionner un ou plusieurs éléments en fonction de leur ordre d'origine, selon une formule. Il est défini dans la spécification [CSS Selectors Level 4](https://www.w3.org/TR/selectors/) comme une "pseudo-classe structurelle", ce qui signifie qu'il est utilisé pour styliser le contenu en fonction de sa relation avec les éléments parents et frères.

Supposons que nous ayons une liste non ordonnée et que nous souhaitions "zébrer" les éléments de la liste en alternance :

```html
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>
```

Plutôt que d'ajouter des classes à chaque élément de la liste (par exemple `.even` (_pair_) & `.odd` (_impair_)), nous pouvons utiliser `:nth-of-type` :

```css
li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}
```

Comme vous pouvez le voir, `:nth-of-type` prend un argument&nbsp;: il peut s'agir d'un seul nombre entier, des mots-clés `even` ou `odd`, ou d'une formule comme indiqué ci-dessus. Si un nombre entier est spécifié, un seul élément est sélectionné, mais les mots-clés ou une formule itéreront à travers tous les enfants de l'élément parent et sélectionneront les éléments correspondants —&nbsp;ce qui est similaire à la navigation dans un tableau en JavaScript. Les mots-clés `even` et `odd` sont simples, mais la formule est construite à l'aide de la syntaxe `an+b`, où&nbsp;:

- "a" est une valeur entière
- "n" est la lettre "n" littérale
- "+" est un opérateur et peut être soit "+", soit "-".
- "b" est un nombre entier et est requis si un opérateur est inclus dans la formule

Il est important de noter que cette formule est une équation, et itère à travers chaque élément frère, déterminant celui qui sera sélectionné. La partie "n" de la formule, si elle est incluse, représente un ensemble d'entiers positifs croissants (tout comme l'itération dans un tableau). Dans notre exemple ci-dessus, nous avons sélectionné un élément sur deux avec la formule 2n, ce qui a fonctionné car à chaque fois qu'un élément était vérifié, "n" augmentait d'une unité (2×0, 2×1, 2×2, 2×3, etc.). Si l'ordre d'un élément correspond au résultat de l'équation, il est sélectionné (2, 4, 6, etc.). Pour une explication plus approfondie des mathématiques impliquées, veuillez lire cet article.

Pour illustrer davantage, voici quelques exemples de sélecteurs `:nth-of-type` valides&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_AwWGpa" src="//codepen.io/zakkain/embed/AwWGpa?height=450&amp;theme-id=light&amp;slug-hash=AwWGpa&amp;user=zakkain&amp;default-tab=result" scrolling="no" frameborder="0" height="450" 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/zakkain/pen/AwWGpa">
  CSS-Tricks: :nth-of-type</a> de zakkain dans <a href="https://codepen.io">CodePen</a></span>
</div>

Heureusement, vous ne devez pas toujours faire les calculs vous-même. Il existe plusieurs testeurs et générateurs de type `:nth-of`&nbsp;:

- [Testeur CSS-Tricks](https://css-tricks.com/examples/nth-child-tester/#)
- [Testeur de Léa Verou](https://lea.verou.me/demos/nth.html)

## À noter

- `:nth-of-type` itère à travers les éléments en commençant par le haut de l'ordre des sources. La seule différence entre ce sélecteur et `:nth-last-of-type` est que ce dernier parcourt les éléments en commençant par le bas de l'ordre des sources.
- Le sélecteur `:nth-of-type` est très similaire à `:nth-child` mais avec une différence essentielle&nbsp;: il est plus spécifique. Dans notre exemple ci-dessus, ils produiraient le même résultat car nous n'itérons que sur les éléments `li`, mais si nous itérions sur un groupe plus complexe de frères et sœurs, `:nth-child` essaierait de correspondre à tous les frères et sœurs, et pas seulement aux frères et sœurs du même type d'élément. Cela révèle la puissance de `:nth-of-type`&nbsp;: il cible un type d'élément particulier dans un arrangement _par rapport à des frères et sœurs similaires, et non pas tous les frères et sœurs_.


La Cascade

dico