Styling every 3rd and 4th item

user_5243272 0
Viewed 3646

I have an array of items that should be displayed as cards. Every 3rd and 4th item should be wider than the others (pattern: narrow - narrow - wide - wide - narrow - narrow - wide - wide... and so on). What I tried so far:

.card {
    &:nth-child(1n) {width: 33%;}
    &:nth-child(2n) {width: 33%;}
    &:nth-child(3n) {width: 66%;}
    &:nth-child(4n) {width: 66%;}
}

Of course this only works for the first 4 items. I want to be able to use this for an infinite amount of items though. I could figure it out neither with &:nth-child(3n) and similar stuff.

Is it possible to solve this with a css grid?

css-grid css-selectors css html
2 Answers

To select every 3rd and 4th item you can use 4n + 3 and 4n + 4 in nth-child selector. 

div > div {
  width: 50px;
  display: inline-block;
  height: 50px;
  border: 1px solid black;
}

div > div:nth-child(4n + 3), 
div > div:nth-child(4n + 4){
  width: 100px;
}
<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

user_46207710

To select every 3rd and 4th item you can use 3n + 3 and 4n + 4 in nth-child selector.

user_72145450
Related