-
Notifications
You must be signed in to change notification settings - Fork 746
Description
Relevant example listed here: https://toot.cafe/@aardrian/112695640079712832
But essentially, explaining the issue: the styles for <col>
affect the style of several table cells, but it's not very easy to relate the selectors of those table cells. The example given is trying to highlight a column whose header cell contains an aria-sort
attribute, whose currently best proposed solution requires duplicating the selector for each column listed:
colgroup:has(+ thead th[aria-sort]:nth-child(1)) col:nth-child(1) {
background-color: rgba(255, 255, 0, 0.15);
}
Since the logic for determining which cells are actually spanned by the column is rather complex (it depends on the number of columns, potentially multiple column groups, and the spans of said columns and groups), my proposal is to add a new pseudo-element to cover the span of the columns. I suggest calling it ::span
, but since that conflicts with the element span
, I'm open to an alternative name. Under this proposal, the markup would change from repeating the above to just:
col:has(::span th[aria-sort]) {
background-color: rgba(255, 255, 0, 0.15);
}