- From: Charles Belov via GitHub <sysbot+gh@w3.org>
- Date: Thu, 03 Feb 2022 19:50:25 +0000
- To: public-css-archive@w3.org
CharlesBelov has just created a new issue for https://github.com/w3c/csswg-drafts:
== [selectors] Add pseudo-classes for only counting rendered children ==
The [tree-structural pseudo-classes](https://www.w3.org/TR/selectors-4/#structural-pseudos) count all children in the document object model (DOM), whether or not they are rendered. It would be useful to also have pseudo-classes which only count rendered children.
Specifically, I am proposing the following pseudo-classes:
:rendered-empty
:nth-rendered-child()
:nth-last-rendered-child()
:first-rendered-child
:last-rendered-child
:only-rendered-child
:nth-rendered-of-type()
:nth-last-rendered-of-type()
:first-rendered-of-type
:last-rendered-of-type
:only-rendered-of-type
Sample use case: Ability to use CSS-only code to provide alternate-row striping in tables where sometimes rows are hidden and sometimes displayed.
Context: A page contains arrival predictions for a bus or metro route. There are multiple patterns for the route, so predictions for each pattern appear on a separate table row. The table is odd-even striped.
If a pattern is considered basic to the route, we display the row for that pattern whether or not there is a prediction for that pattern. This is indicated by a row attribute data-use-for-ui="1".
If a pattern is considered a rare variation, we only display the row for that pattern when there is an actual prediction for that pattern. This is indicated by row attributes data-use-for-ui="0" accompanied by a non-zero data-prediction-count attribute. If data-prediction-count="0" then we don't display the row.
The predictions, and thus the DOM, are updated every 30 seconds using AJAX. The rendered prediction text and the value of the data-prediction-count attribute get updated at this time.
In the following DOM sample, we have a heading row (CSS not included) followed by two shaded rows and one unshaded row. We would like to have alternating shaded and unshaded rows.
DOM sample:
```
<table>
<colgroup>
<col style="width: 75%;">
<col style="width: 25%;">
</colgroup>
<thead>
<tr>
<th>Direction</th>
<th>Predicted Arrivals</th>
</tr>
</thead>
<tbody aria-live="polite" role="status" aria-atomic="true">
<tr class="direction" id="direction-KT___I_L44" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Embarcadero Station</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L43" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Embarcadero to Embarcadero Station Inbound</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L41" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Embarcadero to Embarcadero Station Outbound</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L52" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Folsom + Embarcadero</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L62" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Caltrain/Ballpark</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_U21" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Sunnydale from Castro Station Inbound</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L82" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to 23rd St & Third St</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_U42" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Sunnydale from West Portal Station</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_U53" data-use-for-ui="1" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Sunnydale from West Portal Ave & 14th Ave</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L87" data-use-for-ui="0" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Marin + 3rd</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_L92" data-use-for-ui="1" data-prediction-count="0">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Williams + 3rd</td>
<td class="predictions">Prediction unavailable</td>
</tr>
<tr class="direction" id="direction-KT___I_F20" data-use-for-ui="1" data-prediction-count="3">
<td><span class="element-invisible">KT: K Ingleside-T Third Street </span>Inbound to Sunnydale from Metro Terminal</td>
<td class="predictions">Arriving, 11, 24 min</td>
</tr>
</tbody>
</table>
```
with CSS:
.direction[data-use-for-ui="0"][data-prediction-count="0"] {
display: none;
}
table tr:nth-child(odd) td {
background-color: #f2f2f3;
[}](url)
results in two adjacent rows that are shaded as #f2f2f3 followed by an unshaded row.
We would like to be able to have the CSS:
.direction[data-use-for-ui="0"][data-prediction-count="0"] {
display: none;
}
table tr:nth-rendered-child(odd) td {
background-color: #f2f2f3;
}
resulting in alternating shaded and unshaded rows.
[Page containing a screen print demonstrating the above active DOM example](https://www.sfmta.com/system/image-issue-filed-feb-3-2022-concerning-table-row-striping).
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7012 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 3 February 2022 19:50:27 UTC