Column combinator
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
Thecolumn 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.
css
/* Table cells that belong to the "selected" column */col.selected||td { background: gray;}Syntax
css
/* The white space around the || combinator is optional but recommended. */column-selector || cell-selector { /* style properties */}Examples
HTML
html
<table border="1"> <colgroup> <col span="2" /> <col /> </colgroup> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </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;}Result
Specifications
| Specification |
|---|
| Selectors Level 4 # selectordef-column |
Browser compatibility
Currently, no browsers support this feature.