Filter and nth-child selector [SOLVED]

Development Web Development
,
1

Hiho,

I have some divs of class ‘item’ and a input field to search them.
The following function is fired from ‘update’ event on input field:

function filterItems(ss) {
	document.querySelectorAll(".item").forEach(ele => {
  	if (ele.dataset.name.includes(ss)) {
    	ele.style.display = 'flex'
    } else {
    	ele.style.display = 'none'
    }
  })
}

It works fine, but I have problems with CSS

.item {
  background-color: red;
}
.item:nth-child(even of :not([display='none'])) {
  background-color: green;
}

Any ideas why the selector is not working after filtering out some divs?

2

Eureka!
Just in case somebody has similar problem:

type function filterItems(ss) {
	document.querySelectorAll(".item").forEach(ele => {
  	if (ele.dataset.name.includes(ss)) {
        ele.hidden = false
    	ele.style.display = 'flex'
    } else {
        ele.hidden = true
    	ele.style.display = 'none'
    }
  })
}

I use both: hidden=true and display=‘none’ because hidden only seems to need some extra steps to work.
As for CSS selector:

.item:nth-child(even of :not([hidden])) {
  background-color: green;
}
1 Like