How to add style for combination of elements nth child?

Question

This is related to calendar styling. When we select date range in the calendar, has to highlight first and last date in dark green and in between dates should be highlighted in light green. But it's not possible to select first and last element using nth-child

.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight {
    background-color: lightgreen;
}
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight:first-child,
.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight:last-child {
    background-color: green;
}

Answer 1

instead of using :first-child and :last-child you can use :first-of-type and :last-of-type, this selector select your target as first and last element that is in your container

your can use this little js code for add these classes for first and last child elements in your code:

const highlights = document.querySelectorAll('.p-calendar .p-datepicker .p-datepicker-calendar tr td>span.p-highlight');
highlights[0].classList.add('first-date');
highlights[highlights.length - 1].classList.add('last-date');

i wish this work for ya