Home >Web Front-end >CSS Tutorial >Can CSS Select Elements Without a Specific Class or Attribute?

Can CSS Select Elements Without a Specific Class or Attribute?

Susan SarandonOriginal: 2025-01-03 22:04:43925browse

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:

<html class="printable">
    <body class="printable">
        <h1 class="printable">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>
    </body>
</html>

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!

css html if for while select using class Attribute this display issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Tooltips with Positioning (Top, Bottom, Left, Right)Next article：Tooltips with Positioning (Top, Bottom, Left, Right)

See more

Can CSS Select Elements Without a Specific Class or Attribute?

Related articles