Alfred Zhong Alfred Zhong - 3 months ago 17
CSS Question

What is dot something followed by something without dot in CSS

For example,

.foo bar
.foo bam {
<key, values>
... ...
}


I know .foo selects the "foo" class, but what about the bar and bam? Are they descendants of "foo"? And bar, bam share the key values inside the curly braces?

Thanks!

Answer

It means that the styling will only be applied to the "bar" and "bam" elements that are inside of the element with the "foo" class.

<div class="foo">
  <bar>...</bar>
</div>

<div class="meal">
  <bam>...</bam>
</div>

In this example only the "bar" element will get your styling. "bam" would not get the styling since it is not withing an element with a class of "foo".