Use of multiple classes in a single CSS declaration

Asked

Viewed 4,328 times

7

I’m learning a little bit about CSS and I’ve come to a question, so 

.header .menu .style-fonte {}

Because it has the 3 names of a class header menu and style-fonte?

css

2 answers

5


This means that the style will be applied to an element that has the class "style-font" and that is inside an element with the 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 to be direct children of each other, could be indirect children.

  • 1

    So that means where the class will be applied?

  • I created an example of where the class could be applied.

  • 1

    Better, that’s exactly what ?

  • You can put all the way or not... it depends on the element you want to select. If you create a CSS class style-fonte without indicating the path then all elements with the class will have the style, if put a path, then not everyone will have the style, only those who are in the way.

  • 1

    Thank you very much!

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 - say where the style will be applied. In this case, to any element [of any type] that has the class style-fonte, descending from an item with the class menu, who in turn is descended from an element with the class header. To answer from Miguel Angelo gives an example of a structure that meets 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.

  • 1

    <style> . menu . logo . josimara { width: 100px; height: 100px; background-color: #F00;} . name . test . josimara { width: 100px; height: 100px; background-color: #030;} </style> <div class="menu"> <div class="logo"> <div class="josimara"></div> </div> </div> </div> <div class="name"> <div class="test"> <div class="josimara"></div> </div> </div> </div> </div>

  • 1

    I’m correct to use it then?

  • 1

    @Josimara Yes, you are. See your example at work: http://jsfiddle.net/h48rX/1/

  • 1

    Thank you very much!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.