Can I Apply Multiple CSS Classes to a Single HTML Element?

Applying Multiple CSS Classes to a Single Element

Can multiple CSS classes be applied to a single HTML element? For example, consider the following code:

<a class="c1" class="c2">aa</a>

In this case, the c2 class seems to be ignored. How can both classes be applied simultaneously?

Solution:

There are two ways to achieve this:

1. Multiple Classes in the Class Attribute

Separate the classes using whitespace, for example:

<a class="c1 c2">aa</a>

2. Class Intersection Selector (No Whitespace)

To specify that an HTML element must contain all of the specified classes, use a CSS selector without any space:

.c1.c2 {
  /* Styles */
}

Using this selector, the element will only be styled if it has both the c1 and c2 classes.

The above is the detailed content of Can I Apply Multiple CSS Classes to a Single HTML Element?. For more information, please follow other related articles on the PHP Chinese website!