10 comments

  • Andrew Parker, over 4 years ago (edited over 4 years ago )

    We've used :not in projects in the past - but I'm cautious about using it now. The problem I found was that defining something by the absence of something else makes it quite difficult to determine the situations in which the styling will apply. For example this:

    .form_radio + .form_radio:not(.form_label-inline) { }

    Is nice and concise - and means you don't have to 'undo' the ':not' match - but if you're maintaining the code and want to check a changing this hasn't broken something unexpectedly you can only search the codebase for all cases of .form_radio, then examine the code to see if it also has .form_label-inline.

    Less of a problem for pseudo elements like the example though.

    3 points
  • Filipe FigueiredoFilipe Figueiredo, over 4 years ago

    Heh, I've been doing this for a few years now. Had another developer scold me for using :not(:first-child) a number of times on a project. Good to know I wasn't the only one.

    2 points
    • Jono HerringtonJono Herrington, over 4 years ago

      In this argument :not(:last-child) is a great use case for :not. :not(:first-child) doesn't make much sense though as all you have to do is the + selector instead. For instance if you have a much of li elements and you didn't want to target the first one, all you would have to do is put a style on li + li.

      0 points
      • Filipe FigueiredoFilipe Figueiredo, over 4 years ago (edited over 4 years ago )

        And all you would have to do for :not(:last-child) is use & + &. I don't think there's such a thing as a "best use case" unless arguing browser compatibility. In this case, :not(:last-child) is not necessarily the best use case. It really just comes down to preference.

        My preference is to keep CSS as english as possible.

        4 points
        • Jono HerringtonJono Herrington, over 4 years ago (edited over 4 years ago )

          Point goes to Filipe. Filipe = 1 ... Jono = 0. Bam!

          & + & slipped my mind there :).

          -- Recant --

          & + & does not target the last child ... it targets everything but the first child. So I'm going to have to take that point back. Sorry mate! So again there is no way to target everything but the last-child without using :not(:last-child). There if however plenty of ways to target the first-child without using :not(:first-child). You can use + or & + & (In Sass) or other options. If your argument however is that you are trying to keep everything in english ... that's a whole other debate :). All the best!

          0 points
  • Paul @StammyPaul @Stammy, over 4 years ago

    As the replies on that state, this route is less performant.

    0 points
    • Peng WangPeng Wang, over 4 years ago (edited over 4 years ago )

      CSS parsing tends to be much lower on the list of browser performance concerns, and perhaps may not make the list at all. It's also probably less of a problem if it's restricted as a child selector (>) and not used on wildcards (.foo :not(...)).

      1 point
      • Kyle BavenderKyle Bavender, over 4 years ago

        CSS parsing tends to be much lower on the list of browser performance concerns, and perhaps may not make the list at all.

        True. My takeaway from Ben's excellent article when I read it was: "Don't make CSS selector decisions based purely on performance conjecture."

        It's also probably less of a problem if it's restricted as a child selector (>) and not used on wildcards (.foo :not(...))

        I'd be curious to test this out. Although I do want to note that "restricting to a child" only improves selector matching to what is on the left of the > character, if that makes sense. :)

        1 point
        • Peng WangPeng Wang, over 4 years ago

          Definitely agree re. parse direction being right to left. I'm also definitely assuming that a more specific (not in specificity) selector yields less searching by the browser, and in this case not for the child, but the parent, which in this case would be an immediate matching parent, not any ancestor.

          1 point