Column combinator
Experimental: 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; }
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 |
---|
Selectors Level 4 (Selectors 4) # the-column-combinator |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Column_combinator |
No |
No |
No
See bug 1605558.
|
No |
No |
No |
No |
No |
No |
No |
No |
No |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator