How to get the number of children div in css or sass

Question

Assuming we have a css list as such

<ul class="parent">
  <li class="child"></li>
</ul>

with the child items being generated based from an iterator. How can you get the number of children within parent in either css or scss.

So I can dynamically modify css attributes like padding based on the nth child.

Answer 1

Neither CSS nor SASS will tell you how many items there are in a list. You'll need JS for that.

However, with SASS you can generate the CSS for as many children as you want automatically:

@for $i from 1 through 8 {

    li:nth-child(#{$i}) {
        padding-left: $i * 20px
    }
}

Change the number 8 to any number you think will have you covered (10? 100? 1000?).

More info: http://clubmate.fi/for-while-and-each-loops-in-sass/