html - Add some styling on last-child -

this question has answer here:

• how select “last child” specific class name in css? 9 answers

i trying find last-child on basic of class , wants apply styling using :last-child selector not per expectation. have limitation don't want use java script , due elements length not fixed can not use nth selector.

used html markup

<ul>     <li class="a">first</li>     <li class="a">second</li>     <li class="a">third</li>         <li class="b">first</li>     <li class="b">second</li>     <li class="b">third</li>         <li class="c">first</li>     <li class="c">second</li>     <li class="c">third</li>         </ul>     

used css

.a{     color:red; } .b{     color:blue; } .c{     color:green; }  .a:last-child{     color:green; } .b:last-child{     color:red; } .c:last-child{     color:blue; } 

any how approach problem.

if trying target last-child of ul element, enough

ul li:last-child {  } 

demo

or if want style last child of each unique class need last-child won't work here, need use nth-of-type instead or formula like

demo

ul li:nth-child(3n+3) { /* way don't have use classes */     color: red; } 

note: if generating elements dynamically of there's no way select last-child of element unique class. have use nth-child, nth-of-type or formula mentioned

---

other way can is, programatically create ul element after n iteration , in loop , use this selector