Is it possible to select every other group of three in CSS?

前端 未结 2 990
隐瞒了意图╮
隐瞒了意图╮ 2020-12-19 06:31

Is it possible to select every other group of three in CSS? And if it is; how?

So in the sample below apply style to the 4-6 and 10-12 lis.



        
相关标签:
2条回答
  • 2020-12-19 06:46

    You're looking for nth-child:

    ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) {
        background:red;
    }
    

    http://jsfiddle.net/bhlaird/utEP4/1/

    0 讨论(0)
  • 2020-12-19 06:55

    You could achieve this with a single selector, using a combination of :not and :nth-child.

    ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3))  {
        color:blue;
    }
    

    jsFiddle here

    Using that selector by itself is pretty useless, though, considering you cannot style the other elements.

    ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6))  {
        color:red;
    }
    

    Using a combination of both will allow you to style everything, see the demo.

    0 讨论(0)
提交回复
热议问题