Is conditional CSS possible? - css

Question

Is it possible to give a particular styling to a child element only if say odd number of child elements are present? Let me elaborate.
I have a
<ul>
tag which gets dynamically populated with data as
<li>
child nodes. I want to apply a styling to the last element, say if only 3 child nodes are present or there are odd numbers. My present requirement is only for three child nodes. I know it is possible to do it easily with JavaScript, but I need a pure CSS solution.

Answer 1

You can combine :nth-last-child() and :nth-child()
li:nth-last-child(1):nth-child(odd) {
background-color: red;
}
li:nth-last-child(1):nth-child(odd) {
background-color: red;
}
<ul>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>
vs
li:nth-last-child(1):nth-child(odd) {
background-color: red;
}
<ul>
<li>x</li>
<li>x</li>
<li>x</li>
<li>x</li>
</ul>

Answer 2

You can achieve this by combining the :last-child pseudo-class with the :nth-child selector.
To select the last element only when a specific number of elements are present, use that number for :nth-child:
*{color:#fff;font-family:sans-serif;font-size:14px;list-style:none;margin:0;padding:0;}
li{
background:#000;
height:20px;
line-height:20px;
margin:2px;
padding:0 2px;
}
li:last-child:nth-child(3){
background:#f00;
}
hr{margin:10px 2px;}
<ul><li></li><li></li><li>I'm red</li></ul>
<hr>
<ul><li></li><li></li><li></li><li>I'm not</li></ul>
To select the last element only when an odd number of elements are present, use odd for :nth-child:
*{color:#fff;font-family:sans-serif;font-size:14px;list-style:none;margin:0;padding:0;}
li{
background:#000;
height:20px;
line-height:20px;
margin:2px;
padding:0 2px;
}
li:last-child:nth-child(odd){
background:#f00;
}
hr{margin:10px 2px;}
<ul><li></li><li></li><li>I'm red</li></ul>
<hr>
<ul><li></li><li></li><li></li><li>I'm not</li></ul>