CSS Column Combinator

The CSS column combinator represents a relationship between an element that defines a column and an element that belongs to that column. It is written as two vertical bars (||) between two selectors. The column combinator is defined in Selectors Level 4, but it remains an experimental, at-risk feature and should not currently be relied upon for production CSS.

Syntax

The column combinator uses two vertical bars (||) between two selectors:

column || cell {
  property: value;
}

The selector on the left identifies a column, while the selector on the right identifies an element associated with that column.

How the Column Combinator Works

Most CSS combinators describe relationships represented directly by the document tree, such as parent, child, descendant, or sibling relationships. Column relationships are different because a table cell is contained within a row in the HTML structure rather than within its corresponding <col> element.

The column combinator is designed to select an element based on this column relationship even though the two elements do not have a normal ancestor, child, or sibling relationship in the document tree.

Table Column Relationships

Consider a table that uses <col> elements to represent its columns:

<table>
  <colgroup>
    <col class="name">
    <col class="price">
  </colgroup>
  <tr>
    <td>Notebook</td>
    <td>$5.00</td>
  </tr>
</table>

Conceptually, the following selector represents cells that belong to the column represented by the price class:

.price || td {
  color: #0088cc;
}

The relationship is based on the column semantics of the document rather than ordinary element nesting.

Browser Support

The column combinator is an experimental Selectors Level 4 feature and is currently marked at-risk in the specification. Browser implementations should not be assumed to support || for CSS selector matching.

Because support is not sufficiently established for normal production use, provide a conventional class, attribute, or other supported selector when dependable styling is required.

Specificity

The column combinator itself does not add any specificity. As with other combinators, specificity is determined by the selectors on either side of the combinator.

Selector	Specificity
`col \|\| td`	`0-0-2`
`.price \|\| td`	`0-1-1`
`.price \|\| .value`	`0-2-0`
`#price \|\| td`	`1-0-1`

These specificity values describe how the selectors are calculated according to selector specificity rules. They do not indicate that the column combinator is currently usable across browsers.

Column Combinator Example

The following example illustrates the intended syntax for selecting table cells associated with a particular column:

.price || td {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

If implemented, this selector would match <td> elements belonging to the column represented by an element with the price class. Because the column combinator remains an experimental, at-risk feature, this example is provided to demonstrate the syntax rather than as a browser-ready example.

Other combinators describe relationships between elements that can be used in CSS selectors:

Specifications

The column combinator is defined in the Selectors Level 4 specification. The feature is currently identified as at-risk and may change as the specification develops.

CSS Column Combinator