Proper Usage and Optimization of CSS :not() Pseudo-class Selector

Basic Syntax of CSS :not() Pseudo-class Selector

In CSS, the :not() pseudo-class selector is used to exclude elements that do not match specific conditions. Its basic syntax is :not(selector), where selector can be any valid CSS selector. For example, input:not([disabled]) selects all input elements without the disabled attribute.

Common Error Analysis and Correction

In practical development, common syntax errors include:

• Omitting square brackets for attribute selectors: disabled is an attribute and must be represented as [disabled]
• Incorrect pseudo-class selector syntax: :not must be followed by parentheses ()
• Incorrect selector concatenation: multiple :not() should be connected with colons

Incorrect example: input:not(disabled)not:[type="submit"]:focus

Correct version: input:not([disabled]):not([type="submit"]):focus

Difference Between Attribute Selectors and Pseudo-classes

Understanding the difference between attribute selectors and pseudo-classes is crucial:

• Attribute selectors use square brackets: [attribute=value]
• Pseudo-classes use colons: :pseudo-class
• disabled is an HTML attribute and must use [disabled]
• :enabled is a CSS pseudo-class representing available form elements

Practical Application Scenarios

In the Bootstrap framework, we can see practical applications of the :not() selector:

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

This code ensures that only non-disabled buttons display a pointer cursor. By analyzing Bootstrap's source code, we find:

• Using :not(:disabled) to exclude disabled native form elements
• Using :not(.disabled) to exclude custom elements with the disabled class
• This double-check ensures compatibility in various scenarios

Performance Optimization Recommendations

Although the :not() selector is powerful, performance considerations are important in large projects:

• Avoid overly complex :not() nesting
• Consider using more specific selectors instead of multiple :not()
• In preprocessors like Sass/Less, be aware of CSS code bloat caused by @extend

Browser Compatibility Considerations

The :not() selector is well-supported in modern browsers, but note:

• IE8 and below do not support it
• Mobile browsers have good support
• Complex selectors may have performance issues on older devices

Best Practices Summary

Based on practical project experience, we recommend the following best practices:

1. Always use correct syntax: :not([attribute]) instead of :not(attribute)
2. Use chained :not() for multiple exclusion conditions: :not(A):not(B)
3. Consider using the :enabled pseudo-class as an alternative to :not([disabled])
4. In large frameworks, use :not() appropriately to avoid style conflicts