Комбинатор столбцов
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Комбинатор столбцов (||
) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.
/* Ячейки таблицы, принадлежащие к столбцу "выделено" */
col.selected||td {
background: gray;
}
Синтаксис
column-selector || cell-selector { /* свойства стиля */ }
Примеры
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
col.selected||td {
background: gray;
color: white;
font-weight: bold;
}
Result
Спецификации
Specification |
---|
Selectors Level 4 # the-column-combinator |
Совместимость с браузерами
BCD tables only load in the browser