Josh Vogt

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.

Read More

CSS Selectors Level 3 Reference

Just over a month ago the CSS WG Blog announced the recommendation of the Selectors Level 3 spec so I made this page as my personal reference for the spec. The page is a repsonsive/fluid design and uses the isotope.js jQuery plugin for layout and filtering. Each selector includes:

• The short description from W3C spec
• Code with a link to live examples on jsFiddle
• A link to the full description on the W3C site
• Visual reference for each selectors browser support

This is the first time I’ve tried creating a responsive/fluid site using isotope.js. By and large there weren’t too many problems but the layout was a bit janky until a fluid/responsive hack was included in plugin. Before that, the layout would go a bit nuts sometimes when I  re-sized the browser window. If you find any errors, feel free to send them to me on Twitter. You can find me on Twitter @dumaurier.

View the CSS Selectors Reference.