This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Комбинатор столбцов
Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Комбинатор столбцов (||) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.
css
/* Ячейки таблицы, принадлежащие к столбцу "выделено" */col.selected||td { background: gray;}Синтаксис
column-selector || cell-selector { /* свойства стиля */}Примеры
HTML
html
<table border="1"> <colgroup> <col span="2" /> <col /> </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;}Result
Спецификации
| Specification |
|---|
| Selectors Level 4 # selectordef-column |