Skip to content
Nate
Stephens

Use :has() Based On Number of Children

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.


Last Updated: