<ul>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
ul li:not(:only-child){
background-position: 0 0;
}
//Base style
html,body{
margin: 0;
padding: 0;
}
ul {
margin:10px 0;
padding: 0;
list-style: none outside none;
text-align: center;
li {
display: inline-block;
width: 105px;
height: 105px;
background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1507/fig2_squid.png) no-repeat -119px 0;
background-size: 348px 105px;
margin: 5px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.