I'm a graphic designer, and I've been studying for a while html
and css
then jump to js
.
When studying css classes, a doubt has assailed me:
.prueba.grande {
font-size: 30px;
}
.cuerpo .mayusculas {
text-transform: uppercase;
}
In the first CSS declaration if I put two classes for example as they are, followed, does it mean that this style will only be applied to the elements that necessarily have the two classes?
And in the second declaration, it could be that what I am saying is that it looks for the elements with class "body" and that all the descendants with class "uppercase" have that style?
I am not clear about the difference between putting together or separating the classes, two id, after several tests in Atom, I think it must be something similar to what I explain, but I am not clear, thanks!
When done like this (together, without the space):
.prueba
The element that also has the class is referenced.grande
.For example:
When it is like this (with the space):
Any descendants of the element
.prueba
that have the class are referenced.grande
.For example:
Here is a fiddle to see the difference:
A: You are correct.
When applying that rule
.prueba.grande {...}
you are saying that it will only apply to the content that you have as a classprueba
andgrande
example:A: You are also correct.
Although very confusing in your question and your concept, but if you look for the elements with the class
cuerpo
and inside this element there must be an element with the classmayúsculas
(not that they necessarily have to). example: