[selectors] Add pseudo-classes for only counting rendered children

[CharlesBelov]

The tree-structural pseudo-classes 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

It would need to be determined whether this only applies to display: none or also to visibility: hidden.

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 &amp; 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 &amp; 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;
}

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 be:

.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.

[tabatkins]

Unfortunately, this would be a selector that depends on layout, and thus isn't possible.

[tabatkins]

That said, for cases like what you're describing, as long as you can describe "tr that is rendered" in terms of a selector, you can write your striping selector as:

table tr:nth-child(odd of [selector goes here]) td {...}

The of <selector> bit means it'll only count things matching that selector.

In this case, it looks like it could be:

table tr:nth-child(odd of :not(.direction[data-use-for-ui="0"][data-prediction-count="0"] )) td {...}

(Unfortunately, support for :nth-child(... of ...) isn't yet universal.)

[CharlesBelov]

Thank you and understood.