How to Target Elements with Multiple Classes Using CSS Selectors?

CSS Selector to Target Elements with Multiple Classes

Determining whether an element satisfies specific criteria is crucial when working with CSS. One such scenario is identifying elements that belong to two or more specific classes. This article provides a straightforward solution to this problem, along with browser compatibility considerations.

To select an element that has multiple classes, use the CSS class selector syntax. Simply chain the class names together without separating them with a space. For example, to select an element with both "foo" and "bar" classes:

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

However, Internet Explorer 6 interpreters chained class selectors differently. For this browser, only the last class selector will be recognized. To ensure compatibility, consider using the following code:

* {
  color: black;
}

.foo.bar {
  color: red;
}

This code assigns the "red" color to elements with both "foo" and "bar" classes, while all other elements retain the default "black" color. Implementing this approach allows for consistent styling across various browsers, including IE6.

The above is the detailed content of How to Target Elements with Multiple Classes Using CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!