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.
Thanks for this clarification and example. :)
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!
I am :root.
Some resources for further exploration of
:rootand 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.
Thanks for this! I didn't know about
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.
In some environments you might not know what the root element is (styling SVG or XML). I imagine it could come in handy in such cases.
I'm using selector :not and combinator ~ a lot. Those are very useful!