Using multiple classes in a single CSS declaration

7

I'm learning a bit about CSS and I came to a question, so

.header .menu .style-fonte {}

Why does the 3 names of a class header menu and style-fonte ?

    
asked by anonymous 01.04.2014 / 23:50

2 answers

5

This means that the style will be applied to an element that has the class "style-source" and that is inside an element with class "menu" and that in turn is inside another element, finally with the class "header".

Example:

<div class="header">
  <div class="menu">
    <div class="style-fonte">
      Estilo se aplica a este elemento!
    </div>
  </div>
</div>

Note that it is not necessary that they be direct children of each other, they could be indirect children.

    
01.04.2014 / 23:52
2

Your CSS has no content, so this rule does nothing. But suppose any content is added:

.header .menu .style-fonte {
    background-color: blue;
}

The first part of the rule - the selectors - tells where the style will be applied. In this case, any element [of any type] that has the class style-fonte , which is descended from an element with class menu , which in turn is descended from an element with class header . The Miguel Angelo's answer gives an example structure that satisfies this criterion, but could be another. The second part of the rule, which is inside the keys, corresponds to the style that will be applied to the selected elements (in this case, make the background color blue).

Example in jsFiddle .

    
02.04.2014 / 00:18