It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Say you want to select an element when it doesn’t have a certain class. That’s what the :not() selector is for.
body:not(.home) {
}But what if there are multiple classes you want to avoid?… Read article “CSS :not() with Multiple Classes”
CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues in older browsers.
Consider the relatively new caret-color property (it changes the color of the cursor in inputs). Its support is still low but that … Read article “Using Feature Detection, Conditionals, and Groups with Selectors”
The :not(X) property in CSS is a negation pseudo class and accepts a simple selector1 as an argument. Essentially, just another selector of any kind.
:not matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.
See the Pen :not(X) by GRAY GHOST (@grayghostvisuals) on CodePen.
/* the X argument can be replaced with any simple selectors */
:not(X) {
property: value;
}