What's the Difference Between `.foo.bar` and `.foo .bar` in CSS Class Syntax?

CSS Class Syntax: .foo.bar vs .foo .bar

In CSS, the syntax for adding classes to elements can vary, leading to confusion about their intended usage. This question addresses the difference between the following two class syntaxes:

.element .symbol vs .element.large .symbol

Explanation

1. .element .symbol: This syntax means that the .symbol class is applied to elements that already have the .element class. In other words, it selects elements that are descendants of elements with the .element class.
2. .element.large .symbol: This syntax is different. Here, the .large class is attached to the .element class. It means that the .symbol class is applied to elements that have both the .element and .large classes.

Example

To illustrate this concept, consider the following HTML and CSS:

<div class="element">
  <div class="symbol"></div>
</div>

<div class="element large">
  <div class="symbol"></div>
</div>

.element .symbol {
  color: red;
}

.element.large .symbol {
  font-weight: bold;
}

In this example, the first .symbol div inside the .element div will be colored red, while the second .symbol div inside the .element large div will be both colored red and bold.

Conclusion

The difference between the two class syntaxes lies in the relationship between the classes specified. .foo.bar selects elements that have the bar class and are descendants of elements with the foo class, while .foo .bar selects elements that have both the foo and bar classes.

The above is the detailed content of What's the Difference Between `.foo.bar` and `.foo .bar` in CSS Class Syntax?. For more information, please follow other related articles on the PHP Chinese website!