13 comments

  • Dan CortesDan Cortes, 3 months ago

    :hover:not(:active) { ... } has been one of my favorite selectors for a while.

    8 points
    • Blake RutledgeBlake Rutledge, 3 months ago

      oooooooo

      1 point
    • Daniel GoldenDaniel Golden, 3 months ago

      I'm squinting trying to decipher what I'm looking at. Can you put the jelly on the lower shelf for the rest of us (me). What does this do?

      2 points
      • Mattan IngramMattan Ingram, 3 months ago

        As far as I can tell this should be a rule which only works when you are hovering a button but not clicking it (buttons are :active while you click them).

        For example if you want a button to get larger when you hover it, but shrink back to normal when you click it.

        1 point
        • Daniel GoldenDaniel Golden, 3 months ago

          oOOooh, I think I get it. Is that commonly desirable functionality?

          0 points
          • Mattan IngramMattan Ingram, 3 months ago

            Not super common, but not exactly rare either. Most buttons/links just change color or background when you hover them and maintain that look as you click.

            0 points
  • Taurean BryantTaurean Bryant, 3 months ago

    This is really good when you want to create a class that overrides most specificity. I use it to apply a blanket screen-reader-only class.

    CSS still treats this as having an ID even though you're technically saying it doesn't have an ID, so it will override any class declaration regardless of its placement in your CSS document. The only thing that could override it would be another ID or an inline style.

    1 point
  • Laura McCartney, 3 months ago

    When it's used properly it's a beautiful thing, but the propensity of developers to abuse it is widespread. I work on a large scale application and I've had to all but ban it.

    1 point
    • Stuart McCoyStuart McCoy, 3 months ago

      I'd be curious to know what problems with this you've run across that requires an all out ban on its use. That seems extreme to me but maybe I've missed something here.

      1 point
    • Tim Smith, 3 months ago

      Yes. I'd love to hear what problems you've had too.

      1 point
    • Wil NicholsWil Nichols, 3 months ago

      Have had similar problems — particularly where the first folks on a project don't recognize that Chrome doesn't allow multiple args within ()

      0 points
  • Alejandro CamaraAlejandro Camara, 3 months ago

    In the example used in the post. I think you could also use the lobotomized owl technique

    .post + .post {
        border-top: 1px solid #eee;
        margin-top: .5rem;
        padding-top: .5rem;
    }
    
    1 point