nth-child(12) dosen't work, but the rest yes <p>I have a list with 12 elements , within those elements I have a div<br> What I want to achieve its that every div will have diffrent size<br> So I use nth-child on the <code>li</code> elemnt to set diffrent size to every <code>div</code> element<br> But the 12 one dosen't work, the rest nth-child workt perfectly</p> <p>My list:</p> <pre><code>&lt;ul class="size"&gt; &lt;li data-radius="1"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 2px &lt;/li&gt; &lt;li data-radius="2"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 4px &lt;/li&gt; &lt;li data-radius="1"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 2px &lt;/li&gt; &lt;li data-radius="3"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 6px &lt;/li&gt; &lt;li data-radius="4"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 8px &lt;/li&gt; &lt;li data-radius="5"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 10px &lt;/li&gt; &lt;li data-radius="6"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 12px &lt;/li&gt; &lt;li data-radius="7"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 14px &lt;/li&gt; &lt;li data-radius="8"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 16px &lt;/li&gt; &lt;li data-radius="9"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 18px &lt;/li&gt; &lt;li data-radius="10"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 20px &lt;/li&gt; &lt;li data-radius="11"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 22px &lt;/li&gt; &lt;li data-radius="12"&gt;&lt;div class="circleSize"&gt;&lt;/div&gt; &lt;br /&gt; 24px &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>My css:</p> <pre><code>.circleSize { background-color:black; display:inline-block; vertical-align: middle; border-radius: 50%; } .size li:nth-child(1) .circleSize { width:2px; height:2px; } .size li:nth-child(2) .circleSize { width:4px; height:4px; } .size li:nth-child(3) .circleSize { width:6px; height:6px; } .size li:nth-child(4) .circleSize { width:8px; height:8px; } .size li:nth-child(5) .circleSize { width:10px; height:10px; } .size li:nth-child(6) .circleSize { width:12px; height:12px; } .size li:nth-child(7) .circleSize { width:14px; height:14px; } .size li:nth-child(8) .circleSize { width:16px; height:16px; } .size li:nth-child(9) .circleSize { width:18px; height:18px; } .size li:nth-child(10) .circleSize { width:20px; height:20px; } .size li:nth-child(11) .circleSize { width:22px; height:22px; } .size li:nth-child(12) .circleSize { width:24px; height:24px; } </code></pre> <p>My jsfiddle: <a href="https://jsfiddle.net/4nvug6og/" rel="nofollow">https://jsfiddle.net/4nvug6og/</a></p>