<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
@import url(https://fonts.googleapis.com/css?family=Lato:900);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
/* color: white; */
font-size: 48px;
}
ul {
width: 50%;
margin: 20px 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
ul li {
border: 10px solid #27ae60;
text-align: center;
flex: 1 0 calc(33.33% - 20px);
padding: 20px;
margin: 0 10px;
}
ul li:nth-last-child(n+4) ~ li,
ul li:nth-last-child(n+4):first-child {
background: #2ecc71;
color: white;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.