How to Exclude Specific Class Names in CSS Selectors?

Excluding Specific Class Names in CSS Selectors

In CSS, there are instances where you may need to exclude particular class names from your selectors. This is especially useful when you want to apply styles to multiple elements, but certain ones should not inherit those styles.

One common scenario involves excluding elements with a specific class name while applying styles to elements with another class name. Let's consider the following example:

<code class="html"><a href="" title="Design" class="reMode_design reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

In this example, we want to apply a background color to elements with the "reMode_hover" class name on hover. However, we do not want to apply this color if the element also has the "reMode_selected" class name.

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

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

While you might expect the first rule to work, it does not. This is because in CSS, space between class names denotes the descendant selector. So, ".reMode_selected .reMode_hover" translates to "select .reMode_hover elements that are descendants of .reMode_selected."

To exclude "reMode_selected" elements correctly, we need to use the "not()" selector. The updated CSS would be:

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

This rule will apply the background color to .reMode_hover elements that do not have the .reMode_selected class name. As a result, only the first link will receive the background color on hover, while the second link will not.

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