CSS selector to invert selection

Question

Is there any advantage or disadvantage in using :not() over an inverted selector logic? May it be in performance, safety or browser support, which approach is recommended?

Either:

.imageSlider img:not(:first-child) {
  display: none;
}

Or:

.imageSlider img {
  display: none;
}

.imageSlider img:first-child {
  display: block;
}

Answer 1

Sometimes it's could be better to use :not.

<p class="my-paragraph">
    <div class="something"></div>
    <div class="something-else"></div>
    <div class="an-other-thing"></div>
    <div class="an-other-thing"></div>
    <div class="last-one"></div>
</p>

In this case, if you want to hide everything except div .an-other-thing it will be quicker to write :

.my-paragraph div:not(.an-other-thing) {
    display: none;
}

Instead of:

.my-paragraph div {
    display: none;
}

.my-paragraph div.an-other-thing {
    display: block;
}

In most of cases, a longer CSS means longer time to execute it

Answer 2

As of January 2017, the :not selector is currently only supported by Safari browsers with a mere 11% global browser support. I would stay away from using it in production code.