Css Selector Add Css To Next Position After Last Match Case Of :not Selector

Here is my HTML code:

...

a

• identify your target-element
• add a class to that target-element

and then you can use that class for styling in your CSS.

For the example you've given, you could deploy the following javascript:~

// GET ALL ITEMSconst allItems = [... document.querySelector('.body-page-check-in-item')];

// GET CHECKED ITEMSconst checkedItems = [... document.querySelector('.body-page-check-in-item.checked')];

// GET LAST CHECKED ITEMconst lastCheckedItem = checkedItems[(checkedItems.length - 1)];

// GET INDEX OF LAST CHECKED ITEMconst indexOfLastCheckedItem = allItems.indexOf(lastCheckedItem);

// GET TARGET ITEMconst targetItem = document.querySelector('.body-page-check-in-item')[(indexOfLastCheckedItem + 1)];

// APPLY TARGET CLASS TO TARGET ITEM
targetItem.classList.add('my-target-item');

And now you can style .my-target-item in your CSS:

.my-target-item {
  [... STYLES HERE...]
}

Solution 2:

There might be a life hack to dynamically target the last selector .body-page-check-in-item.checked, but I couldn't do that. If this html structure is constant (unchanged), then this will be the actual solution, using the pseudo-class :nth-last-child(), specifying the number of this selector.

.body-page-check-in-item.checked:nth-last-child(4) + :not(.checked) {
    color: red;
}

<divclass="body-page-check-in-list"><divclass="body-page-check-in-item checked">a</div><divclass="body-page-check-in-item checked">b</div><divclass="body-page-check-in-item">c</div><divclass="body-page-check-in-item">d</div><divclass="body-page-check-in-item checked">e</div><divclass="body-page-check-in-item checked">f</div><divclass="body-page-check-in-item">g</div><divclass="body-page-check-in-item">h</div><divclass="body-page-check-in-item">i</div></div>

Share