In CSS with the .className selector you can define the properties for every element with “className” class. Every element could have more classes. The meaning of a selector with more classes depends on how you combine them in your declarations:

  • .class1.class2 will match only the elements that have both of them classes defined.
    .class1.class2 { background: red; }
    <div class="class1 class2"></div>
  • .class1, .class2 will match the elements with .class1 or .class2
    .class1, .class2 { background: yellow; }
    <div class="class1"></div>
    <div class="class2"></div>
  • .class1 .class2 will match only the elements with class2 within elements with class1.
    .class1 .class2 { background: blue; }
    <div class="class1">
        <div class="class2"></div>
    </div>
Advertisements