Can CSS Style Elements Based on Multiple Classes Simultaneously?

Can CSS Style Elements Based on Multiple Classes?

Selecting elements based on multiple classes can be useful for styling complex page layouts. Without using JavaScript, you can achieve this by chaining CSS selectors with no spaces between them.

For example, to apply a style rule to an li tag that has both the .left and .ui-class-selector classes:

li.left.ui-class-selector {
    /* style here */
}

This CSS rule will only match and style elements that have both .left and .ui-class-selector classes applied.

Here's another example of a more complex CSS selector:

div.container .item.active.hovered {
    /* style here */
}

This rule will only match and style elements that have the following classes:

• .container
• .item
• .active
• .hovered

Note that the order of the classes in the selector is important. The rule will only match elements that have the classes applied in the specified order.

The above is the detailed content of Can CSS Style Elements Based on Multiple Classes Simultaneously?. For more information, please follow other related articles on the PHP Chinese website!