Targeting Elements with Multiple Classes Using CSS Selectors

When working with HTML and CSS, you may encounter situations where you need to select elements based on the values of specific classes. One common requirement is to select elements with multiple classes assigned to them.

Question:

Given three divs with the following classes:

Hello Foo
Hello World
Hello Bar

How can you write CSS to select only the second element (with the "foo bar" classes) using CSS selectors?

Answer:

To select elements with multiple classes, simply chain the class selectors without any space in between. In this example, the CSS code would be:

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

This selector will apply styles to the second div, as it is the only element that has both the "foo" and "bar" classes assigned to it.

Additional Note:

Older browsers like Internet Explorer 6 may not correctly interpret chained class selectors. IE6 will only read the last class selector and ignore the others. To ensure compatibility with IE6, you should avoid using chained class selectors and instead use more specific selectors, such as:

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