<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

<div class="box">
  <p>P1</p>
  <span>S1</span>
  <span>S2</span>
  <span>S3</span>
  <p>P2</p>
  <p>P3</p>
  <span>S4</span>
  <p>P4</p>
  <p>P5</p>
  <p>P6</p>
</div>
body {
  padding: 2vw;
  text-align: center
}

ul {
  margin: 20px 0;
  padding: 0;
}

li,
p,
span {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: orange;
  margin: 5px;
  line-height: 50px;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
}

// each($num,$type:false)
// from: https://github.com/W3cplus/SassMagic/blob/master/src/mixins/_selector.scss
@mixin each($num, $type: false) {
  @if $type == true {
    &:nth-of-type(#{$num}n){
      @content;
    }
  }
  @else {
    &:nth-child(#{$num}n){
      @content;
    }
  }
}

li{
  @include each(2) {
    background: #f36;
  }
}
p {
  @include each(3,true){
    background: #893;
  }
}

span {
  @include each(2,true){
    background: #e89;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.