CSS Classes: Space vs. No Space—What's the Difference?

CSS Classes: With Space vs. Without Space

In CSS, there are two ways to write class selectors: with space (.class .class) and without space (.class.class). Each syntax serves a different purpose.

Without Space: .class.class

This syntax indicates that the element must have both classes to match the selector. For example, .element.large .symbol would select any .symbol element that is within an .element element that also has the large class.

With Space: .class .class

This syntax indicates that the element must have both classes in any order. For example, .element .symbol would select any .symbol element that is within an .element element. However, it would also select any .element element that has a .symbol class, regardless of its position in the document.

Example:

Consider the following CSS:

.element {
  color: black;
}

.large {
  font-size: 2em;
}

.symbol {
  font-family: monospace;
}

• .element .symbol would select all .symbol elements that are within .element elements, and they would inherit the color: black style from .element.
• .element.large .symbol would select all .symbol elements that are within .element elements that also have the large class, and they would inherit the color: black and font-size: 2em styles.

The above is the detailed content of CSS Classes: Space vs. No Space—What's the Difference?. For more information, please follow other related articles on the PHP Chinese website!