Column combinator
Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.
컬럼 결합자 (||)는 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 |