Targeting Elements with Multiple Classes Using CSS Selectors
Consider the following HTML structure:
<div class="foo">Hello Foo</div> <div class="foo bar">Hello World</div> <div class="bar">Hello Bar</div>
To selectively style an element that possesses two specific classes, utilize the following CSS syntax:
.foo.bar {
/* Styles for elements with both foo AND bar classes */
}In the provided example, this selector will exclusively target the second
<div class="foo bar">Hello World</div>
Caution for Internet Explorer 6
Note that Internet Explorer 6 does not fully support chained class selectors. Consequently, applying the aforementioned CSS rule in IE6 will only apply styles to elements with the last specified class (.bar).
For browsers still supporting IE6, consider using alternative approaches to target elements with multiple classes.
The above is the detailed content of How Can I Style Elements with Multiple Classes Using CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
