15 comments

  • Ege GörgülüEge Görgülü, over 8 years ago (edited over 8 years ago )

    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.

    8 points
  • Ivan VásquezIvan Vásquez, over 8 years ago

    Of course I knew about them.

    smug face

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

    3 points
  • Emily Campbell, over 8 years ago

    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!

    2 points
  • Catalin CimpanuCatalin Cimpanu, over 8 years ago (edited over 8 years ago )

    Nice find.

    2 points
  • Robert BusbyRobert Busby, over 8 years ago

    I am :root.

    1 point
  • Abhishek SureshAbhishek Suresh, over 8 years ago (edited over 8 years ago )

    Image alt

    0 points
  • Brian ZelipBrian Zelip, over 8 years ago (edited over 8 years ago )

    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

    0 points
  • muhammad usmanmuhammad usman, over 8 years ago

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

    0 points
  • Hmphry xHmphry x, over 8 years ago

    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.

    0 points
  • Shuo Yang, over 8 years ago

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

    0 points
  • Robert BusbyRobert Busby, over 8 years ago

    I know about + and ~. Go me!

    The rest blew my mind though.

    0 points
  • Nick MNick M, over 8 years ago

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

    0 points
    • Jonathan SvärdénJonathan Svärdén, over 8 years ago (edited over 8 years ago )

      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.

      2 points
  • b. brielb. briel, over 8 years ago

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

    0 points