blob: fb9fd15cd3da4b2ec5b737b17e567a3bc873f47e (
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
80
81
82
83
84
85
|
---
title: Combinateur de colonne
slug: Web/CSS/Column_combinator
tags:
- CSS
- Reference
- Sélecteur
translation_of: Web/CSS/Column_combinator
original_slug: Web/CSS/Combinateur_colonne
---
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
Le **combinateur de colonne** (`||`) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.
```css
/* Les cellules de tableaux qui appartiennent */
/* à la colonne "selected" */
col.selected || td {
background: gray;
}
```
## Syntaxe
column-selector || cell-selector {
/* propriétés pour le style */
}
## Exemples
### HTML
```html
<table border="1">
<colgroup>
<col span="2"/>
<col class="selected"/>
</colgroup>
<tbody>
<tr>
<td>A
<td>B
<td>C
</tr>
<tr>
<td colspan="2">D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td colspan="2">G</td>
</tr>
</tbody>
</table>
```
### CSS
```css
col.selected || td {
background: gray;
color: white;
font-weight: bold;
}
```
### Résultat
{{EmbedLiveSample("Exemples", "100%")}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
| {{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}} | {{Spec2("CSS4 Selectors")}} | Définition initiale. |
## Compatibilité des navigateurs
{{Compat("javascript.builtins.Array.sort")}}
## Voir aussi
- {{HTMLElement("col")}}
- {{HTMLElement("colgroup")}}
- {{CSSxRef("grid")}}
|
