How to Exclude a Specific Class from a CSS Selector?

How to Exclude a Specific Class from a CSS Selector?

When working within limited environments where JavaScript is unavailable, CSS becomes an essential tool for dynamic styling. One common challenge is how to prevent certain elements from being affected by a specific CSS rule when they also have another class.

To illustrate, consider the task of changing the background color of an element on hover unless it also has the "reMode_selected" class. The following code demonstrates an attempt to achieve this:

<code class="css">/* Do not apply background-color */
.reMode_selected .reMode_hover:hover {
}

/* Apply background-color */
.reMode_hover:hover {
    background-color: #f0ac00;
}</code>

However, this approach fails because it targets elements with both "reMode_hover" and "reMode_selected" classes, regardless of whether the hover event is triggered. To resolve this issue, the multiple class selector must be used without spacing (descendant selector):

<code class="css">.reMode_hover:not(.reMode_selected):hover {
    background-color: #f0ac00;
}</code>

This selector uses the ":not" pseudo-class to exclude elements with the "reMode_selected" class from the background color styling when hovering over the "reMode_hover" elements.

The above is the detailed content of How to Exclude a Specific Class from a CSS Selector?. For more information, please follow other related articles on the PHP Chinese website!