Difference of putting two classes in css together or separately in a statement

4

I'm a graphic designer, and I've spent some time studying html and css and then jump to js .

When studying css classes I was assaulted by a doubt:

.prueba.grande {
  font-size: 30px;
}

.cuerpo .mayusculas {
  text-transform: uppercase;
}

In the first CSS declarion if I put two classes for example as they are, followed, does it mean that only that style will be applied to the elements that you necessarily have the two classes?

And in the second statement, can it be that what I am saying is that I look for the elements with class "body" and that all descendestes with class "capital letters" have that style?

I do not have the clear difference between putting together or separate classes, two id, after several tests in Atom, I think it should be something similar to what I explain, but I'm not clear, thank you!

    
asked by Luis Quesada Romero 04.04.2017 в 18:42
source

2 answers

2

When done in this way (together, without the space):

.prueba.grande{
     /*atributos*/
 }

Reference is made to the .prueba element that also has the class .grande .

For example:

<div class="prueba grande">
    <h1></h1>
</div>

When it is this way (with space):

.prueba .grande{
     /*atributos*/
 }

Any descendant of the .prueba element that has the class .grande is referenced.

For example:

<div class="prueba">
    <span>
        <h1 class="grande"></h1>
   </span>
</div>

Next I put a fiddle to see the difference:

.prueba.grande {
  color: red;
}
.prueba .grande {
  color: green;
}
<div class="prueba grande">
  <h1>hola</h1>
</div>
<div class="prueba">
  <span>
        <h1 class="grande">hola</h1>
   </span>
</div>
    
answered by 04.04.2017 / 19:03
source
3
  

In the first CSS declaration if I put two classes for example as they are, followed, does it mean that only that style will be applied to the elements that you necessarily have the two classes?

R: You're correct

By applying this rule .prueba.grande {...} you are saying that you will only apply to the content that has as class prueba and grande example:

.prueba.grande {
  font-size: 30px;
}
<div class="prueba grande">aquí si aplica</div>

<div class="prueba">
  <div class="grande">aquí no aplica</div>
</div>

<div class="otra_clase">
  <div class="prueba grande">Si aplica
    <div class="otra"> y en este tambien</div>
  </div>
</div>
  

And in the second statement, it may be that what I am saying is that I look for the elements with class "body" and that all descendants with "uppercase" class have that style?

R: You're also right.

Although very confusing in your question and your concept, but if you look for the elements with the class cuerpo and within this element there should be an element with the class mayúsculas (not necessarily force it should have). example:

.cuerpo .mayusculas {
  text-transform: uppercase;
}
<div class="cuerpo mayusculas">aquí no aplica</div>

<div class="cuerpo">
  <div class="mayusculas">aquí si aplica</div>
</div>

<div class="cuerpo">
  <div class="otra_clase">No aplica
    <div class="mayusculas"> y en este si aplica</div>
  </div>
</div>
    
answered by 04.04.2017 в 19:12