Obramowanie elementów listy

Cześć, robię todolist w js. W css ustawiam border tak żeby sąsiadujące elementy nie miały dwóch linii oddzielających tylko jedną. Ustawiam dla pierwszego border góra i dół dla ostatniego tylko dół, ale jak dodam 3 to ten drugi traci obramowanie. Jak dodać do tych poza pierwszym i ostatnim? Mam też przycisk do usuwania zadań, jeśli usunę ostatni element to ten co był przedostatni nie dostaje już obramowania na dole, da się jakoś odświeżyć sam css czy to obramowanie dodawać w js i problem się rozwiąże?

Dodaj dla wszystkich a potem nadpisz dla tych co mają nie miec bordera.

Działa ale tylko jak dodaję elementy. Gdy usunę pierwszy element to w tym drugim zostaje tylko dolny border.

 border-bottom:1px solid black;
                            border-top:1px solid black;
                                                                             
                            &:not(:first-of-type){
                                border-bottom:   1px  solid black;
                                 border-top:0 solid black;                   
                            }

Na pewno z js'em możesz to rozwiązać. Przypisać na nth-child co gdzie chcesz w css. Przy dodawaniu elementu wywołanie funkcji ktora ustawia bordery z js'a. Zawsze mozesz zmienic polozenie elementów o 1px zeby bordery nachodzily.

Tak myślałem żeby robić to w js, ale zrezygnowałem z obramowania, dodałem margines i też dobrze to wygląda