blob: fdef2a2689528e81fbdfa043d0fc4704a2d5e327 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
title: ':nth-col'
slug: Web/CSS/:nth-col
translation_of: Web/CSS/:nth-col
browser-compat: css.selectors.nth-col
---
{{CSSRef}}{{SeeCompatTable}}
La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:nth-col()`** est conçue pour les tableaux et les grilles. Elle accepte les notations de type `An+B` telles qu'utilisées avec le sélecteur {{Cssxref(":nth-child")}}, ce qui permet de cibler un jeu de colonnes. Les valeurs _odd_ et _even_ sont aussi valides.
```css
/* Sélectionne toutes les valeurs impaires du tableau */
:nth-col(odd) {
background-color: pink;
}
```
## Syntaxe
La pseudo-classe `nth-col` est spécifiée avec un argument unique qui représente le motif utilisé pour faire la correspondance des éléments.
Voir {{Cssxref(":nth-child")}} pour une explication plus détaillée de cette syntaxe.
### Syntaxe formelle
{{csssyntax}}
## Exemples
### Exemple basique
#### HTML
```html
<table>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
</tr>
<tr>
<td>un</td>
<td>deux</td>
<td>trois</td>
<td>quatre</td>
</tr>
</table>
```
#### CSS
```css
td {
border: 1px solid #ccc;
padding: .2em;
}
/* Colonnes impaires */
:nth-col(2n+1) {
background-color: pink;
}
```
#### Résultat
{{EmbedLiveSample('Exemples', 250, 200)}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
|
