Styles based on number of children

Question

I have a container (.homepage-section) and inside this there could be up to three .widget\'s. Depending on how many .widget\'s there i

Answer 1

Try the following:

.widget {
  @for $j from 2 through 5 {
    @for $i from 1 through $j {
      &:nth-of-type(#{$j + 1 - $i}):nth-last-of-type(#{$i}),
      &:nth-of-type(#{$j + 1 - $i}):nth-last-of-type(#{$i}) ~ .widget {
        width: (1000px / $j);
      }
    }
  }
}

(see the edited pen).

The general rule — for each count of widgets, the sum of numbers in nth-* and nth-last-* must be the number of widgets plus 1, and the overall width must be divided by the number of widgets.