Which selector matches all buttons except those with the class 'primary'?

Which selector matches all buttons except those with the class 'primary'?

• A. button.primary
• B. button:not(.primary)
• C. button:not-primary
• D. .button:not(.primary)

Answer: (B)

Using the negation pseudo-class :not() with a type selector targets all elements of that type except those that match the inner selector. Here, button:not(.primary) means “select every button element that does not have the class primary.” This correctly includes any button without that class, regardless of other classes or lack of classes. The other options don’t fit for these reasons: button.primary would select only buttons that do have the primary class, which is the opposite of excluding it. button:not-primary isn’t valid CSS because the :not() argument must be a valid selector, and not-primary isn’t recognized. .button:not(.primary) would select only elements that have the class button (and are not primary), missing plain button elements that don’t have the button class.

Using the negation pseudo-class :not() with a type selector targets all elements of that type except those that match the inner selector. Here, button:not(.primary) means “select every button element that does not have the class primary.” This correctly includes any button without that class, regardless of other classes or lack of classes.

The other options don’t fit for these reasons: button.primary would select only buttons that do have the primary class, which is the opposite of excluding it. button:not-primary isn’t valid CSS because the :not() argument must be a valid selector, and not-primary isn’t recognized. .button:not(.primary) would select only elements that have the class button (and are not primary), missing plain button elements that don’t have the button class.