How to Combine Multiple CSS Class Styles without Repeating Code?

Combining Multiple CSS Class Styles

To apply the same CSS property to multiple classes without repeating code, consider merging the class selector declarations. This can be achieved by separating the class names with a comma, as seen below:

<code class="css">.abc, .xyz {
  margin-left: 20px;
}</code>

In this example, the CSS property margin-left: 20px; is applied to both the .abc and .xyz classes. The CSS snippet in your example can be rewritten using this approach:

<code class="css">.abc {
  margin-left: 20px;
}

.xyz {
  margin-left: 20px;
}</code>

Becomes:

<code class="css">.abc, .xyz {
  margin-left: 20px;
}</code>

The above is the detailed content of How to Combine Multiple CSS Class Styles without Repeating Code?. For more information, please follow other related articles on the PHP Chinese website!