CODEWITHSUNDEEP
htmlcsscss-selectors
Alfred Zhong
Alfred Zhong

Reputation: 7081

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!

Upvotes: 2

Views: 319

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

Your CSS:

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

(note, there is no comma) selects elements similar to the following:

<div class="foo"> 
    <bar>
       <div class="foo">
           <bam>some stuff...</bam>
       </div>
    </bar>
</div>

Upvotes: 2

Christian Stewart
Christian Stewart

Reputation: 15519

Those things following the initial selectors are descendants of the HTML node.

For example:

.my-class img {
     width: 50px;
     height: 50px;
}

Would affect img in:

<div class="my-class">
    <img src="myImage.png"/>
</div>

Would not affect img in:

<div class="my-other-class">
    <img src="myImage.png"/>
</div>

Upvotes: 2

Sandy DeLeon
Sandy DeLeon

Reputation: 662

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".

Upvotes: 3

Related Questions