Our volunteers haven't translated this article into فارسی yet. Join us and help get the job done!
You can also read the article in English (US).

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;
}

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 4
The definition of 'column combinator' in that specification.
Working Draft Initial definition.

Browser compatibility

No compatibility data found. Please contribute data for "css.selectors.column" (depth: 1) to the MDN compatibility data repository.

See also

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, ExE-Boss, mfuji09, chrisdavidmills
Last updated by: mdnwebdocs-bot,