Using nested nth-child selector

Vote count:

0

I am using sass and have the following html structure:

<div class='d1'>
  <div class='d2'>
    <div class='d3'>
     <div class='d4'>
      <div class='d5'>
      </div>
    </div>
  </div>
  </div>
</div>

I want to set different background-position of each div but removing the class and using nested sass instead like this:

  & div:nth-child(2)
    background-position: 0px 0px
    div
      transform: translate3d(60px,0,0)
      div
        background-position: -120px 0px
        div
          background-position: -180px 0px
          div
            background-position: -240px 0px

It is working but I found it wrong, because on each div all background-position properties of parent divs are applied, too.

I have try to use nth-child and first-child selectors with combination of & in order to restrict css inheritance but was not able to build something valid:

   & div:nth-child(2)
    background-position: 0px 0px
    & div:first-child
      transform: translate3d(60px,0,0)
      & div:first-child
        background-position: -120px 0px
        & div:first-child
          background-position: -180px 0px
          & div:first-child
            background-position: -240px 0px

Could anyone tell how this can be done?

asked 2 mins ago

gotqn

3,368