I just want to add one caveat of the :not selector:
It's quite expensive when working on low-performance environment. (let's be clear, I'm not talking about regular personal computer.)
CSS parse selector from right to left. So for this :
li:not(:first-of-type){}
The parser will select all nodes being :first-of-type (potentially a lot). Then apply the inverse with the :not, and finally keeping only the li tag among them.
Given :not is never the only way to do something in CSS, if you really care for performance, avoid the :not selector. (in the end, it's very useful and I use it on personal projects)
Nice post.
I just want to add one caveat of the
:notselector:It's quite expensive when working on low-performance environment. (let's be clear, I'm not talking about regular personal computer.)
CSS parse selector from right to left. So for this :
The parser will select all nodes being
:first-of-type(potentially a lot). Then apply the inverse with the:not, and finally keeping only thelitag among them.Given
:notis never the only way to do something in CSS, if you really care for performance, avoid the:notselector. (in the end, it's very useful and I use it on personal projects)Very good point! Something to definitely keep in mind when choosing what kind of CSS selector to use. Thanks for sharing this insight 👍