<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;
}

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

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

span {
  @include after(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.