This page was translated from English by the community. Learn more and join the MDN Web Docs community.
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 |