I've been racking my brain trying to select all children if there are x or more children present.
I want to be able to select all child elements if there are at least x children.
So far, I've managed to target all children when there are exactly x children present (refer to .example-1), and I've also successfully targeted children after the first x children (refer to .example-2).
However, I require assistance with my .example-3 in order to target all list items if there are x or more list items present.
Check out all the examples along with a template for .example-3 provided. https://jsfiddle.net/joshmoto/vghawo83/
/* Turn all list items red if there are at least 3 li's */
.example-1 {
LI:first-child:nth-last-child(3),
LI:first-child:nth-last-child(3)~LI {
background: red;
}
}
/* Turn all list items red after the second li */
.example-2 {
LI:nth-child(n + 2) {
background: red;
}
}
/* Turn all list items red if there are 3 or more li's */
.example-3 {
LI {
/* Need assistance with this one please */
}
}
If it's feasible to achieve this, the desired outcome for my .example-3 would be as follows...
Example 3 - Turn all list items red if there are at least 3 li's