This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The column combinator (||
) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.
/* Table cells that belong to the "selected" column */
col.selected || td {
background: gray;
}
Syntax
column-selector || cell-selector { /* style properties */ }
Examples
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
col.selected || td {
background: gray;
color: white;
font-weight: bold;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of 'column combinator' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Column combinator ( |
Chrome
No support No |
Edge
No support No |
Firefox No support No No support No Notes' See bug 1605558. |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
See also
Column combinator by Mozilla Contributors is licensed under CC-BY-SA 2.5.