How to Apply Multiple CSS Classes to a Single HTML Element?

Applying Multiple CSS Classes to a Single Element

In HTML, the class attribute can be used to specify CSS classes for styling an element. However, it's common to face the issue where only one class gets applied if you assign multiple classes within the same class attribute.

Problem:

Applying multiple classes to a single element using separate class attributes, as shown below, doesn't always work as expected:

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

Answer:

There are two methods to apply multiple CSS classes to a single element effectively:

Method 1: Multiple Classes in Class Attribute

Separate the class names with whitespace within the class attribute:

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

This method assigns both classes to the element simultaneously.

Method 2: CSS Selector for Multiple Classes

To target an element that contains all specified classes, use the following CSS selector without any space between class names:

<code class="css">.c1.c2 {
    /* CSS properties */
}</code>

This selector checks for elements that have both the "c1" and "c2" classes applied.

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