Does CSS :not() Support Multiple Arguments for Element Exclusion?

Debunking the Multiple Argument Myth for :not() Pseudo-Class

In CSS, the :not() pseudo-class allows for the exclusion of elements based on specific criteria. However, there's a common misconception that multiple arguments can be chained together within the pseudo-class. This misconception arises when attempting to exclude multiple types of input elements using type as a criterion.

Consider the example provided:

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

The intent is to select input elements of all types except radio and checkbox. However, this syntax fails to work.

The Solution: Breaking Down the Exclusion Criteria

To address this issue, rather than chaining multiple arguments within :not(), CSS offers a simple solution: use separate :not() statements for each exclusion criteria. In this case:

input:not([type="radio"])):not([type="checkbox"])

This syntax correctly selects input elements that are neither radio nor checkbox. The :not() pseudo-class operates on an exclusive basis, so using multiple statements ensures that all designated criteria are met for an element to be excluded.

Remember:

The :not() pseudo-class does not support multiple arguments chained within a single statement. To exclude multiple types of elements, use separate :not() statements for each exclusion criteria. By breaking down your exclusion criteria into individual statements, you can effectively target the desired elements in your CSS.

The above is the detailed content of Does CSS :not() Support Multiple Arguments for Element Exclusion?. For more information, please follow other related articles on the PHP Chinese website!