<div>
  <span>1/1</span>
</div>
<div>
  <span>1/2</span>
  <span>2/2</span>
</div>
<div>
  <span>1/3</span>
  <span>2/3</span>
  <span>3/3</span>
</div>
<div>
  <span>1/4</span>
  <span>2/4</span>
  <span>3/4</span>
  <span>4/4</span>
</div>
div{
  padding: 0.3em;
}  

span {
  display: inline-box;
  border: 1px solid #ddd;
}

span:nth-child(n+3),
span:nth-last-child(n+3),
span:nth-child(2):nth-last-child(2) {
  color: green;
}

span:nth-child(1):nth-last-child(2),
span:nth-child(2):nth-last-child(1) {
  color: blue;
}

span:only-child {
  color: red;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.