Try it Live

​x
 
<!DOCTYPE html>
<html>
 <head>
   <style>
     [class~="class1"] {
       background-color: orange;
       border:4px groove tomato;
     }
   </style>
 </head>
 <body>
   <h2>Example of CSS attribute Class Selector</h2>
   <p class="class1">
     CSS Attribute Selector with the class as it is a fixed a match. [attribute~="value"] is applied.
   </p>
   <p class="class1 class2">
     Class Attribute Selector is applied as it "class1" matches one of the value. [attribute~="value"] is applied.
   </p>
   <p class="class2">
     Class2 is not same as class1 so [attribute~="value"] is NOT applied.
   </p>
 </body>
</html>
​