CODEWITHSUNDEEP
csscss-selectors
Youboyn
Youboyn

Reputation: 13

Using nth type to select grid items with an odd sequence

So I have this grid type with posts that keeps appearing as you scroll down.

Please See the picture to see what I mean

enter image description here

Notice that the selections are 2,3, 6,7, 10,11, 14,15 and so on.. And I can't seem to get any CSS nth of type formula working to derive these results.

Anybody got an idea on how to make such a selection? Any help would be appreciated.

Upvotes: 1

Views: 388

Answers (2)

itacode
itacode

Reputation: 3787

Please try to use the following selectors:

li:nth-child(4n+2) {
  background-color: green;
}
li:nth-child(4n+3) {
  background-color: yellow;
}
<ul>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
  <li>50</li>
</ul>

Upvotes: 1

Justinas
Justinas

Reputation: 43479

It would be 4n+2 and 4n+3 to repeat every 4th element starting from 2 and 3

.wrapper {
  width: 100px;
}
.wrapper div {
  float: left;
  width: 50px;
  box-sizing: border-box;
  height: 50px;
  border: 1px solid #ddd;
}

.wrapper div:nth-child(4n+2),
.wrapper div:nth-child(4n+3) {
  background-color: green;
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Upvotes: 1

Related Questions