Как выбрать первые 3 элемента?

Question

[rinatoptimus]

Имеется список из 8 элементов. Как выбрать первые 3, следующий пропустить, затем опять следующие 3 элемента, наконец, последний пропустить? Имеется ввиду присвоить выбранным элементам стиль.
Возился с nth-child(-1n+3), nth-child(2n+1) и тд, никак не разберусь.
https://codepen.io/rinatoptimus/pen/awaEaJ

li {
  float: left;
  margin: 20px;
  width: 20px;
  height: 20px;
  background-color: red;
  list-style: none;
}
li:nth-child(-1n+3):nth-child(-n+8)  {
  border-right: 3px solid green;
}

Comments

[Hyubert]

Может так?

:nth-child(4n) {display: block}  :last-child { display: block}
ul li {display: none}

Answer 1

[devstudent]

так не получится, проще определить что исключить , а не что выбрать

<ul>
  <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
    <li>
    bla bla  
  </li>
</ul>

ul li {
  font-size:15px;
  color:red;
}
ul li:not(:nth-child(3n)) {
  color:blue;
}

Answer 2

[Froggyweb]

Очень прикольный миксин для таких случаев lukyvj.github.io/family.scss под scss есть под Stylus

Comments

[rinatoptimus]

Спасибо!

[Александр Сущин]

Спасибо, пригодилось )))