There is approximately the following design:

<row class="tripleRow inverse"> <div class="container collomn-fix"> <div class="col-sm collomn-fix"> <div class="block-tovar"> Наполение </div> </div> <div class="col-sm collomn-fix"> <div class="block-tovar"> Наполение </div> </div> <div class="col-sm-12 collomn-fix"> <div class="block-tovar"> Наполение </div> </div> </div> </row>

I want to paint the background alternately, using the following:

 .block-tovar:nth-of-type(even) { background-color: @BGColorOne; }

But alas, nothing happens. I do through Brackets, he does not even want to highlight. Without a pseudo-class, everything is fine, but it does not see with it. I tried to write just row.tripleRow .block-tovar so he also does not see. What is the problem?

    1 answer 1

    The problem is that this selector calculates the index of elements at the same level inside the container.

    That is, now blocks with the block-tovar class are the only elements in the container. The rule says, change the color of an element with an even index.

    Since there is one element in the container, its 1 index is odd and the selector does not apply.

     .block-tovar:nth-of-type(even) { background-color: yellow; } 
     <row class="tripleRow inverse"> <div class="container collomn-fix"> <div class="col-sm collomn-fix"> <div class="block-tovar"> Наполение </div> </div> <div class="col-sm collomn-fix"> <div class="block-tovar"> Наполение </div> <div class="block-tovar"> я четный </div> </div> <div class="col-sm-12 collomn-fix"> <div class="block-tovar"> Наполение </div> <div class="block-tovar"> я четный </div> </div> </div> </row>

    • For sure. I did not even think about it. Need more sleep) - BwehaaFox
    • @BwehaaFox, if the answer helped - mark it with a solution! - HamSter
    • @ElenaSemenchenko Would mark immediately if there were no delays before being able to mark the correct answer. - BwehaaFox