<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.