Comments on: :not https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Wed, 11 May 2022 19:45:36 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Kerry Johnson https://css-tricks.com/almanac/selectors/n/not/#comment-1795717 Wed, 11 May 2022 19:45:36 +0000 http://css-tricks.com/?page_id=14238#comment-1795717 One point that I rarely see brought up as for :not()‘s usefulness is that you can keep the original styles of the element that you may not know the value of ahead of time. This comes in handy when you are applying utility classes to elements that could be of any display type.

Basically, instead of this…

.show-children-on-hover * {
  display: none;
}

.show-children-on-hover:hover * {
  display: block; /* We just assumed every child element of .show-child-on-hover is of block display; chances are they are not. */
}

…we can instead hide the element when the parent is NOT hovered, and whenever it is, the rule below becomes invalid and the element it is attached to takes on its normal display value. Now your table won’t have display:block set to it like in the above example. I used display:block in this example because that seems to be the most common property when showing/hiding an element (none and block).

.show-children-on-hover:not(:hover) *{
  display: none; /* Only changes display when .show-children-on-hover is NOT hovered */
}
]]>
By: Kerry Johnson https://css-tricks.com/almanac/selectors/n/not/#comment-1795716 Wed, 11 May 2022 18:58:57 +0000 http://css-tricks.com/?page_id=14238#comment-1795716 In reply to Jono.

It is valid CSS. This has tripped me up before also, but you have to think like CSS does and read it as :not(.someClass) which technically allows .anotherClass, and then further along reads :not(.anotherClass) which allows .someClass. By combining it in one line you are saying “not .someClass AND not .anotherClass”, not one OR the other (which basically cancels each other out).

]]>
By: Jono https://css-tricks.com/almanac/selectors/n/not/#comment-1774162 Thu, 17 Jun 2021 12:06:07 +0000 http://css-tricks.com/?page_id=14238#comment-1774162 In case anyone struggles like I did, here is an example of chaining:

/* chained :not is valid */
div:not(.someClass):not(anotherClass) {
color: red;
}

I was trying to do this:

/* comma separated :not selectors are not valid */
div:not(.someClass),
div:not(anotherClass) {
color: red;
}

I was not aware that comma separated :not selectors are invalid.

This should be added to the Specificity section of the article.

]]>
By: Geoff Graham https://css-tricks.com/almanac/selectors/n/not/#comment-1764927 Mon, 09 Nov 2020 15:49:57 +0000 http://css-tricks.com/?page_id=14238#comment-1764927 In reply to Kevin.

That’s what’s reflected in the content as well. It’s not that the specificity is unchanged, but the specificity is determined by the highest specificity in its argument.

]]>
By: Kevin https://css-tricks.com/almanac/selectors/n/not/#comment-1764895 Fri, 06 Nov 2020 23:46:45 +0000 http://css-tricks.com/?page_id=14238#comment-1764895 I think the “:not()” selector does add to specificity.
That’s from the MDN Page 2020.

]]>
By: Lucas Martins https://css-tricks.com/almanac/selectors/n/not/#comment-1750571 Thu, 08 Aug 2019 03:48:11 +0000 http://css-tricks.com/?page_id=14238#comment-1750571 In reply to Lucas Martins.

You right, Bernard Skibinski!

]]>
By: Tiffany https://css-tricks.com/almanac/selectors/n/not/#comment-1750202 Thu, 18 Jul 2019 01:28:42 +0000 http://css-tricks.com/?page_id=14238#comment-1750202 Try container > *:not(.some class):not(:first-child), you should have better luck chaining nots rather than chaining selectors inside a not

]]>
By: Thomas https://css-tricks.com/almanac/selectors/n/not/#comment-1750178 Wed, 17 Jul 2019 08:39:01 +0000 http://css-tricks.com/?page_id=14238#comment-1750178 I wonder why:
.container > *:not(.someclass:first-child){ background:red }
isn’t working, while ..
.container > *:not(:first-child){ background:red }
works.

Tried just in FF, but this should work, shouldn’t it?

]]>
By: Mac https://css-tricks.com/almanac/selectors/n/not/#comment-1608717 Tue, 23 May 2017 13:09:45 +0000 http://css-tricks.com/?page_id=14238#comment-1608717 How to apply :not in following situation

This should be bold.
This should be bold.
This should be bold.
This should not be bold.

I would like to set same background color using .menu class but at the same time I also dont want to apply same color to hidden-menu class

Thanks,

]]>
By: chatterbox https://css-tricks.com/almanac/selectors/n/not/#comment-1607765 Sat, 01 Apr 2017 09:58:16 +0000 http://css-tricks.com/?page_id=14238#comment-1607765 In reply to Ryan.

@ ryan

You can use this. This equates to – any a tag with an href attribute that ends in “.jpg”, “.gif”, “.png” Just add or remove whatever image file types you need.

a[href$=".jpg"],  a[href$=".gif"], a[href$=".png"] {
  /*css styles here*/
}
]]>
By: Bernard Skibinski https://css-tricks.com/almanac/selectors/n/not/#comment-1607523 Fri, 17 Mar 2017 13:25:29 +0000 http://css-tricks.com/?page_id=14238#comment-1607523 In reply to Lucas Martins.

.foo:not(.bar, .baz, .qux)

doesn’t work in CSS.

You’re probably using SCSS/SASS that converts it into

.foo:not(.bar):not(.baz):not(.qux)

And my biggest problem with that, is the specificity it gains each time you add a :not

]]>
By: Ryan https://css-tricks.com/almanac/selectors/n/not/#comment-1604741 Thu, 27 Oct 2016 19:23:54 +0000 http://css-tricks.com/?page_id=14238#comment-1604741 I’m using code that adds an icon to links that are external.

<style>

#block-system-main a[href^="http"], #block-system-main a[href^="https"] {
    background-image: url("/sites/default/files/external.png");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
}
</style>

My Question is:

how do i alter this code so any link that is surrounding an < img >, will NOT show the external icon?

IE: < a >< img >< /a >

]]>
By: Paceaux https://css-tricks.com/almanac/selectors/n/not/#comment-1603489 Tue, 16 Aug 2016 19:25:12 +0000 http://css-tricks.com/?page_id=14238#comment-1603489 Something I think is missed here is

The specificity of the :not pseudo class is the specificity of its argument. The :not() pseudo class does not add to the selector specificity, unlike other pseudo-classes.

What I recently learned is that you can actually get burned by this matter of “argument specificity inheritance”:

.foo:not(#bar)

will have a specificity of 0,1,1,0. Understood another way, you have now given a class the specificity of an ID.

It’s not too likely that someone might do this. However, a use-case I just ran into today was:

     <section class="menu">
    <ul>
    <li>
    <a href="/" class="icon-logo">
    [class*="icon-"]:not(.icon-wrapper) {
      line-height: 1;
    }
    .menu ul > li a {
     line-height: 50px; //overwritten by the ruleset above
  }

You wouldn’t expect this result at all. At least I didn’t. But it happened, because :not() inherits specificity. So I had a ruleset with a specificity of 0,0,2,0 overwriting a ruleset with a specificity of 0,0,1, 3.

Here’s some documented proof of this in action:

http://codepen.io/paceaux/pen/mEoAxg

The moral of the story is, “the argument you pass into :not() should be less specific than what it’s chained to.

]]>
By: Lucas Martins https://css-tricks.com/almanac/selectors/n/not/#comment-1602993 Fri, 22 Jul 2016 15:47:51 +0000 http://css-tricks.com/?page_id=14238#comment-1602993 In reply to Lucas Martins.

Yes, it works.

]]>
By: Corry Frydlewicz https://css-tricks.com/almanac/selectors/n/not/#comment-1602656 Wed, 06 Jul 2016 00:32:51 +0000 http://css-tricks.com/?page_id=14238#comment-1602656 Another useful one (especially when setting up defaults that you expect to be overridden by classes) is :not([class]). It only styles the element if it has no classes assigned to it at all. :)

]]>