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 */
}

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).

/* 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.

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.

You right, Bernard Skibinski!

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

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,

@ 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*/
}

.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

<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 >

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.

Yes, it works.