Core CSS

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
 
 

© 2007–2022 XoaX.net LLC. All rights reserved.