I also commented on the article but just incase it doesn't get approved:

"Because Pseudo-class selectors have a higher specificity than that of targeting an element or a class"

The class part is not correct. Pseudo classes are grouped together with classes and attribute selectors in the specificity hierarchy.

Check out this pen to see what I mean: http://codepen.io/bamf/pen/lAvmC

If pseudo classes had higher specificity, the gray box would have turned red when hovered. They have the same specificity.

Of course I knew about them.

Just kidding, great article, looking forward to the next one.

These are useful, but you may also want to reference this NetTuts article from a few years ago that goes into more detail and includes additional selectors: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Understanding the relationship between different selectors and when to use them is a major step in writing more semantic code. Of course, while it goes without saying, I'll say it anyway: Always check for browser consistency, especially in legacy browsers!

Nice find.

I am :root.

Some resources for further exploration of :root and the (hopefully) forthcoming CSS custom properties recommendation:

• W3C's working draft of CSS Custom Properties for Cascading Variables Module (a surprisingly easy read)
• Rework - a node css preprocessing framework (partly by the dude who brought us normalize.css)
• Rework vars - the Rework plugin for enacting the above W3C syntax
• Suit CSS - some "other shit" that I don't exactly understand yet; "style tools for component-based UI development"; via the Rework camp
• Basscss - cool ass oocss library, the new v4 implements Rework in place of Sass.

Happy learning

Thanks for this! I didn't know about :root

I really hate this post title, because this CSS isn't hidden. Many people know about them. :not() is about the only one that is practical if you have total control of the HTML.

Thanks! nice post, I don't know about "~" before.

I know about + and ~. Go me!

The rest blew my mind though.

Didn't know about :root. Can't imagine an instance where I'd use it, but good to know about it! Thanks for posting.

I'm using selector :not and combinator ~ a lot. Those are very useful!