Skip to content Skip to sidebar Skip to footer
Home / Css / Html

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

Post a Comment
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 ITEMS
const allItems = [... document.querySelector('.body-page-check-in-item')];

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

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

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

// GET TARGET ITEM
const 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;
}
<div class="body-page-check-in-list">
    <div class="body-page-check-in-item checked">a</div>
    <div class="body-page-check-in-item checked">b</div>
    <div class="body-page-check-in-item">c</div>
    <div class="body-page-check-in-item">d</div>
    <div class="body-page-check-in-item checked">e</div>
    <div class="body-page-check-in-item checked">f</div>
    <div class="body-page-check-in-item">g</div>
    <div class="body-page-check-in-item">h</div>
    <div class="body-page-check-in-item">i</div>
</div>

You may like these posts

Post a Comment for "CSS Selector Add Css To Next Position After Last Match Case Of :not Selector"