Here's an example of using the CSS :has()
pseudo-class to conditionally apply styles based on a minimum length of its total number of children elements.
ul:has(li:nth-child(6)) {
columns: 2;
}
If there are at least 6 <li>
children elements then apply columns: 2;
to the <ul>
.
You can then follow that up with another conditional if there are even more children.
ul:has(li:nth-child(11)) {
columns: 3;
}
Just be sure to have the more specific condition (in this case 11
) lower down the cascade.