Multiple headings in a css class label or id label

Forgive me but i did not know how to ask the question so if the title of this confuses you , i understand
When i look at other peoples code, on the css side i see something that confuses me and i’m like “did i miss something in the curriculum that taught this”
See the thing is i see a lot of things like this:

.agnf hakj{

}
#hello .ciao {

}
.pricing-table div ul {
blah
blah
}
this would make sense:
#hello, .ciao {

}//because then i know you want to style the class hello and id ciao the same way. The one on top, with no commas confuses me. What are they doing?

So your question is, what is #hello .ciao{} doing?

HTML

<div id="hello">
  <p class="ciao">Ciao Class<p>
</div>
<div id="hello2">
  <p class="ciao">Ciao Class<p>
</div>

CSS

#hello .ciao {
 color: red;
}

What CSS with spaces is saying. Look for id “hello” TEHN look for class “ciao” inside of id “hello” and apply the color red to the text.

The class “ciao” in id “hello2” will not be red because you selected id “hello” first then found class “ciao” inside of it and applied the color red to the text.

CSS

#hello, .ciao {
 color: red;
}

What CSS with commas is saying. Look for id “hello” and apply the color red to the text. DONE Look for class “ciao” and apply the color red to the text

1 Like