[selectors] New selector based on the amount of child elements #5694
Description
Overview
Currently there are no selectors that let us apply a style based on the total amount of direct children the element has.
I can't apply red color if the element that has 2 direct children or green color if it has 3 direct children.
My proposal is to add a new pseudo-class called :nth-children(n) which is based on the existing naming conventions.
Code Example
Lists:
ul:nth-children(2) { /* only if a list has 2 child elements */
color: red;
}
ul:nth-children(3) { /* only if a list has 3 child elements */
color: green;
}Tables:
table tr:nth-children(4) { /* only if a tr has 4 child elements (including <td>, <th> and other elements) */
background-color: red;
}
table tr:nth-children(5) { /* only if a tr has 5 child elements (including <td>, <th> and other elements) */
background-color: green;
}The Problem with Existing Pseudo-Class
The vast majority of the child element selectors are trying to drill up - the selector applied on the <li> checking against the parent <ul> element.
While my proposal is to drill down (like flex and grid) - the selector applied on the <ul> checking against the amount of child <li> elements.
E:first-child
An E element, first child of its parent.
E:last-child
An E element, last child of its parent.
E:only-child
An E element, only child of its parent.
E:nth-child(n [of S]?)
An E element, the n child of its parent matching S.
E:nth-last-child(n [of S]?)
An E element, the n child of its parent matching S, counting from the last one.
E:empty
An element that has no children (neither elements nor text) except perhaps white space. (This selector is the only selector that applied on the parent element, checking child elements.)
E > F
An F element child of an E element. (This is a general selector to target a specific child element. Doesn't count totals.)
The Solution
As mentioned above, the new selector will behave like flex and grid, it will be applied on the parent element and check the total number of children elements it has.
E:nth-children(n)
An E element, counting total n children.
Usage
Conditional design based on the amount of child elements:
tr:nth-children(1) td {
color: red;
}
tr:nth-children(2) td,
tr:nth-children(3) td,
tr:nth-children(4) td {
color: yellow;
}
tr:nth-children(5) td,
tr:nth-children(6) td,
tr:nth-children(7) td {
color: green;
}Another example is to use keyword values:
ul:nth-children(even) { /* 2, 4, 6, etc. */
color: red;
}
ul:nth-children(odd) { /* 1, 3, 5, etc. */
color: green;
}Use Cases
This can help developers apply conditional design in many case:
- Style content based on the total amount of paragraphs - too few paragraphs will have red text color, the more paragraphs the text has the greener the text become.
- Style charts (see ChartsCSS.org) based on the amount of data items (
<td>elements) and amount of datasets (<tr>elements). - Style different lists
<ol>,<ul>,<dl>based on the total amount of list items.