The issue you are facing lies within the specific requirement at hand:
In order to determine if all div elements with the listItem class also possess the inactive class, and subsequently apply the errorItem class with the style of display:block.
While it is possible to set a styling for the final <div> based on its preceding siblings, conducting an exhaustive check for the presence of the inactive class among all divs poses a challenge without prior knowledge of their quantity. A potential solution involves utilizing the sibling combinator (+) along with a rather complex selector:
.errorItem {
display: none;
}
.listItem.inactive + .listItem.inactive + .listItem.inactive + .listItem.inactive + errorItem {
display: block;
}
However, this approach becomes impractical, especially in scenarios where the number of preceding elements before the .errorItem element varies dynamically.
If there exists a different class name assigned to elements that meet the specified criteria—such as active—the solution can be simplified using the following method:
.errorItem {
display: block;
}
.listItem.active ~ .errorItem {
display: none;
}
Furthermore, as mentioned in the comments, certain browsers support the negation operator which allows for a selector like this:
.errorItem {
display: block;
}
.listItem:not(.inactive) ~ .errorItem {
display: none;
}
In general, employing JavaScript would be recommended to facilitate such functionality, particularly considering that Wookmark implies some level of JavaScript (if not jQuery) usage on the website.
Vanilla JavaScript implementation could look something like this:
function hasPrecedingSibling(elem, state) {
if (!state) {
return false;
}
var found = false,
cur = elem;
while (cur.previousElementSibling && !found) {
if (cur.classList.contains(state)) {
found = true;
} else {
cur = cur.previousElementSibling;
}
}
return found;
}
[].forEach.call(document.querySelectorAll('.errorItem'), function(err) {
err.style.display = hasPrecedingSibling(err, 'active') ? 'none' : 'block';
});