CODEWITHSUNDEEP
csscss-selectors
jantimon
jantimon

Reputation: 38150

CSS :not performance

Is the browser able to optimize longer :not chains or would that cause negative performance impacts?

Simplified example:

.animal:not(.cow):not(.dog):not(.cat):not(.bird):not(.unicorn):not(.tiger) {
   display: none !important
}

The idea behind is that I want to hide those animals but

  1. I don't know how those animals are styled. E.g. cow might have display:table, tiger might have display:flex and .unicorn might even have display: none
  2. I don't know about the specificity of the animals original selectors

Upvotes: 5

Views: 3227

Answers (1)

itacode
itacode

Reputation: 3787

According to the books and other writings I read about CSS, it does not seem a problem. This is an excellent book (Scalable and Modular Architecture for CSS - Jonathan Snook) extract about Selector Performance.

Upvotes: 5

Related Questions