In my list, I have 12 elements and each element contains a div. My goal is to set different sizes for each div by using nth-child on the li element. However, the configuration for the 12th element does not seem to work correctly compared to the rest of the nth-child settings.
Below is an example of my list:
<ul class="size">
<li data-radius="1"><div class="circleSize"></div> <br /> 2px </li>
<li data-radius="2"><div class="circleSize"></div> <br /> 4px </li> <li data-radius="1"><div class="circleSize"></div> <br /> 2px </li>
<li data-radius="3"><div class="circleSize"></div> <br /> 6px </li>
<li data-radius="4"><div class="circleSize"></div> <br /> 8px </li>
<li data-radius="5"><div class="circleSize"></div> <br /> 10px </li>
<li data-radius="6"><div class="circleSize"></div> <br /> 12px </li>
<li data-radius="7"><div class="circleSize"></div> <br /> 14px </li>
<li data-radius="8"><div class="circleSize"></div> <br /> 16px </li>
<li data-radius="9"><div class="circleSize"></div> <br /> 18px </li>
<li data-radius="10"><div class="circleSize"></div> <br /> 20px </li>
<li data-radius="11"><div class="circleSize"></div> <br /> 22px </li>
<li data-radius="12"><div class="circleSize"></div> <br /> 24px </li>
</ul>
This is a snippet of my CSS style:
.circleSize {
background-color:black;
display:inline-block;
vertical-align: middle;
border-radius: 50%;
}
.size li:nth-child(1) .circleSize {
width:2px;
height:2px;
}
(size code continues for setting sizes up to 11)If you want to see this in action, check out the JSFiddle link below: https://jsfiddle.net/4nvug6og/