Multiple Class or Identity Selectors

This CSS Reference section displays the code for an example that illustrates selectors for multiple classes or identities.

MultipleClassIdentitySelectors.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .cFirst {
        background-color:khaki;
      }
      .cSecond {
        border:2px solid gold;
      }
      .cThird {
        color:red;
      }
      .cFirst.cSecond {
        height:40px;
      }
      .cFirst.cSecond.cThird {
        border-radius:10px;
      }
      #idFirst.cFirst {
        color:blue;
      }
    </style>
  </head>
<body>
  <div style="border:4px double gray;width:300px;background-color:white;">
    <div>Class: None</div>
    <div class="cFirst">Class: cFirst</div>
    <div class="cSecond">Class: cSecond</div>
    <div class="cThird">Class: cThird</div>
    <div class="cFirst cSecond">Class: cFirst and cSecond</div>
    <div class="cFirst cThird">Class: cFirst and cThird</div>
    <div class="cSecond cThird">Class: cSecond and cThird</div>
    <div class="cFirst cSecond cThird">Class: cFirst and cSecond and cThird</div>
    <div id="idFirst" class="cFirst">ID: idFirst, Class: cFirst</div>
  </div>
</body>
</html>

Output

Class: None

Class: cFirst

Class: cSecond

Class: cThird

Class: cFirst and cSecond

Class: cFirst and cThird

Class: cSecond and cThird

Class: cFirst and cSecond and cThird

ID: idFirst, Class: cFirst