Element Filtering Using CSS3 Negation Pseudo-Class
I was going to title this post, “I was bored at work today so here’s some CSS” but that didn’t seem very descriptive. And for those that don’t want to scroll down to find the link to the demo: Here you go.
Essentially, I was trying to filter content based on data attribute and the negation pseudo-class. And it works well using a combination of :not(s) pseudo-class and the general sibling combinator.
a[data-filter="red"]:focus ~ div:not([data-filter="red"]) works by selecting all divs that do not have a data-filter attribute equal to exactly “red”. These divs must also be a sibling of an in focus <a> element that has a data-filter attribute equal to “red”. If these requirements are met then all other divs have their values zeroed out.