Draft
This page is not complete.
This is an experimental technology
Check 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; }
column-selector || cell-selector { /* style properties */ }
<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>
col.selected || td { background: gray; color: white; font-weight: bold; }
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of 'column combinator' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Column combinator (A || B )
|
No | No | No
|
No | No | No |
Mobile | ||||||
---|---|---|---|---|---|---|
Column combinator (A || B )
|
No | No | No | No | No | No |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator