How to apply CSS only if there are a certain number of nested elements

This week, I had to write CSS for a design where a list of elements got a bit of extra design treatment if there were at least three nested items inside it. <!-- Base design --> <ul class="magic-list"> <li>Item 1</li> <li>Item 2</li> </ul> <!-- Extra design --> <ul class="magic-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <!-- ... --> </ul> I really wanted to avoid using…