Исключить элементы класса из CSS стилизации: селекторы

Fast Answer

To exclude elements in CSS, the selector : not () is used. For example, you want to apply styles to all buttons, excluding those that have the disabled class:

button: not (.disabled) {
  /* styles for all buttons except inactive ones */
}

This code targets all buttons, except for those that belong to the .disabled class. Therefore, there is no need to use the "not equal" selector – everything is clear and concise.

Application : not () in practice

Optimizing your CSS

Rather than tagging each item through class or id, it is better to use a construction like this:

element: not (.irrelevantClass) {
  /* it's convenient and efficient */
}

This approach reduces redundancy and increases transparency, making your work more productive – in a word, advantages are abundant!

Подробнее об этом расскажет наш спикер на видео

Combined usage of selectors :not() and attributes

Increase the effectiveness of : not () by combining it with attribute selectors for more targeted use:

input: not ([type = "checkbox"]) {
  /* styles for all fields except checkboxes */
}

Protecting against surprises in browsers

Although the : not () selector is widely supported, it is always worth checking for compatibility with the browser. For old versions that do not support : not (), you can activate backup classes:

.oldschool {
  /* alternative for old versions of browsers */
}

Visualization

Imagine that you need to select all balloons, except for black:

🟠🟣⚫🔵🔴🟡🟢

Now give the sun to each ball, except for black:

🟠☀️🟣☀️🔵☀️🔴☀️🟡☀️🟢☀️

As a result, we have left:

🟠🟣🔵🔴🟡🟢

In CSS, it can be depicted like this:

div.balloon: not (.blackBalloon) {
  /* balloons in the sun rays */
}

Each .balloon corresponds to a ball, and .blackBalloon – to black. The : not () selector allows you to assign styles to everyone, except for a specific option.

Demonstrating efficiency: reducing CSS formalities

Minimize complexity in CSS by setting basic styles, and making exceptions through : not ():

:not(.blues) {
  /* life is brighter without sadness */
}

This reduces redundancy and turns your code from a novel into a compact booklet.

Using JavaScript for fine-tuning

If you need a finer setting than CSS : not (), JavaScript comes to the rescue:

$("element:not(.classToIgnore)") // example of usage in jQuery

This is especially convenient for dynamically managing DOM elements based on complex criteria.

Going the dynamic way: enhancing with JavaScript

Setting styles dynamically

Combine declarative CSS : not () with JavaScript to add styles in real-time:

document.querySelectorAll ('div:not(.dynamic)'). forEach (el => {
  el.style.backgroundColor = 'green'; // now these are green items
});

Progressive enhancement using JavaScript layers

Start with the basic use of : not (), built on CSS, and add layers using JavaScript as required, for example, to work with dynamic classes or interactive states. This is like flavoring your software dish!

Useful materials

1. : not () – CSS: Cascading Style Tables | MDN – a detailed guide to the : not () selector in CSS.
2. : not | CSS-Tricks – learn how to fully use the : not () selector.
3. CSS selector: not – a tutorial with practical examples of : not () applications.
4. Can I use ... Support tables for HTML5, CSS3, etc – find out if your browser supports functionality with : not ().
5. CSS Directory – your comprehensive source of CSS knowledge.
6. CSS Specificity Features | CSS-Tricks – master the art of specificity in CSS, especially when using : not ().