How can I style my ul list items to match the design shown in the image? Can this be achieved using CSS nth-child selector or any other CSS techniques?
https://i.sstatic.net/fkfMl.jpg
ul, ol {
list-style: none;
padding: 0;
}
li {
text-align: center;
line-height: 2;
background: slategrey;
border:1px solid white;
}
li:nth-child(1) {
background: lightsteelblue;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<!--There may be more list items -->
</ul>