Can CSS Select Elements Without a Specific Class or Attribute?

Can One Write CSS to Select Elements Lacking a Class or Attribute?

This issue arises when one wishes to select elements that do not possess a specific class or attribute. For instance, consider the HTML below:

    
        <h1 id="Example">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    

In this case, we aim to select the elements without the "printable" class, namely the nav and a elements.

Solution:

Traditionally, one can achieve this with the :not() pseudo-class applied to a class selector:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

However, for enhanced browser compatibility (IE8 and below lack :not() support), it is recommended to style elements that do possess the "printable" class. If this is impractical, modifying the markup may be necessary.

Considerations:

Properties set within this rule may affect descendants with the "printable" class. For example, setting display: none on :not(.printable) will conceal both it and its descendants. Instead, consider using visibility: hidden to allow descendants to display while maintaining the original layout. Caution is therefore advised.

The above is the detailed content of Can CSS Select Elements Without a Specific Class or Attribute?. For more information, please follow other related articles on the PHP Chinese website!