Can I write a CSS selector selecting elements NOT having a certain class or attribute?

Absolutely, CSS offers multiple ways to select elements without specific classes or attributes.

1. Using the :not() Pseudo-Class Selector

:not() is a powerful pseudo-class selector used to select all elements that do not match a given selector. For example, if you want to select all elements that do not contain the specific class .class-name, you can write:

css
:not(.class-name) {
    /* Style rules */
}

This rule applies to all elements without the .class-name class.

2. Combining with Attribute Selectors

If you want to select elements without a specific attribute or attribute value, you can combine :not() with attribute selectors. For instance, to select all elements that do not have the data-type attribute:

css
:not([data-type]) {
    /* Style rules */
}

Or to select all elements where the data-type attribute is not equal to 'example':

css
:not([data-type="example"]) {
    /* Style rules */
}

Example Use Case

Suppose you are developing a website and need to apply specific styles to all text except for headings. You can use the :not() selector to exclude heading elements (assuming all headings have the .title class):

css
:not(.title) {
    font-size: 16px;
    color: #666;
}

This will apply the styles to all elements without the .title class, allowing you to more precisely control style application on the page.

Conclusion

Using the CSS :not() selector, you can flexibly target elements without specific classes or attributes and apply styles to them. This approach enhances CSS styling by making it more modular and manageable.