CODEWITHSUNDEEP
cssselector
user1438038
user1438038

Reputation: 6079

CSS selector to invert selection

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

Upvotes: 3

Views: 8226

Answers (2)

toddmacintyre
toddmacintyre

Reputation: 1

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.

Upvotes: -2

Magicprog.fr
Magicprog.fr

Reputation: 4100

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

Upvotes: 3

Related Questions