Column combinator

실험적: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

컬럼 결합자 (||)는 CSS 선택자 사이에 위치합니다. 이는 첫번째 선택자에 의해 일치되는 컬럼 요소에 속하는 두번째 선택자와 일치되는 요소들만을 매칭합니다.

css

/* "selected" 컬럼에 속한 테이블 셀 */
col.selected||td {
  background: gray;
}

구문

css

/* || 결합자 주위의 공백은 선택이자 권장 사항입니다. */
column-selector || cell-selector {
  /* style properties */
}

예제

HTML

html

<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </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;
}

결과

명세서

Specification
Selectors Level 4 # selectordef-column