CSS'de nth-child'i sıralanmış elementler arasından bazılarında değişiklik yapmak istediğinizde kullanıyorsunuz. Siz de sadece 1 tanesini değiştirmek istiyorsunuz. Örnek vermek gerekirse kendi temamdan göstereyim ;



Bu menüdeki kategorilerin hepsi aynı kod ile çalıştığı için, siz CSS'de değişiklik yaptığınız zaman biri değil hepsi değişiyor. Bu kısımda nth-child ile sadece belirlediğiniz birinin tasarımında değişikliğe gidebiliyorsunuz. Gördüğünüz gibi yukarıdaki örnekte ana sayfa yazan kısım diğerlerinden farklı. Bunu şu şekilde yapıyoruz ;

Bu kod ile menüyü listeliyoruz diyelim :
.menu ul li { padding: 8px; margin-bottom: 10px; border-radius: 4px; }

Bu kod ile de seçtiğimiz birinin tasarımını değiştiriyoruz :
.menu ul li:nth-child(1) { color: #5667eb; background: #f1f4fd; }

Alttaki kodda yazan nth-child(1), 1.sıradakini ifade ediyor. Siz kaçıncı sıradaki kategoride işlem yapacaksanız o kısma o numarayı girmelisiniz.