列結合子

草案
このページは完成していません。

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

列結合子 (column combinator) (||) は、二つの CSS セレクターの間に配置されます。前者のセレクターに一致する列要素に所属する、後者のセレクターに一致する要素に一致します。

/* 表の "selected" クラスの列に所属するセル */
col.selected || td {
  background: gray;
}

構文

column-selector || cell-selector {
  /* スタイルプロパティ */
}

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

結果

仕様書

仕様書 状態 備考
Selectors Level 4
column combinator の定義		 草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Column combinator (A || B)
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1605558.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報