html - How to use :nth-child correctly to target individual elements? -

so have <ul> 5 <li> tags nested in. want style them differently , have been experimenting :nth-child try , target each <li> element instead of adding classes etc.

my .scss file looks this:

  ul {     display: inline-block;     li:nth-child(1) {       list-style-type: none;       list-style: none;       display: inline-block;       background: blue;     }     li:nth-child(2) {       list-style-type: none;       list-style: none;       display: inline-block;       background: red;     }     li:nth-child(3) {       list-style-type: none;       list-style: none;       display: inline-block;       background: white;     }     li:nth-child(4) {       list-style-type: none;       list-style: none;       display: inline-block;       background: pink;     }   } 

i've added in colours try , notice style changes pick easier

however, i'm not targeting each <li> element , changing colour few , getting colour blue show. have misunderstood? help?

what have done working, however, yuo first should try target selectors differently, example:

ul{   li{     &:nth-child(2){       /* code here */     }   } } 

also, note :first-child , :last-child pseudo-selectors exist.

in end, advice is, if possible, add color or background color programatically seems more content-specific theme constraint. and, if cannot use server that, maybe try sass lists , @for directives. have maintanable code.