Using non-alphanumeric characters in CSS

You can use non-standard characters like “:” in CSS class names if you escape them with a backslash. Libraries like Tailwind CSS do that a lot for adding state selectors like hover: or focus:.

<style>
  .text\:italic {
    font-style: italic;
  }
 
  .text\:uppercase {
    text-transform: uppercase;
  }
</style>
 
<p class="text:italic text:uppercase">
  Italic and uppercase
</p>

<style>
  .text\:italic {
    font-style: italic;
  }
 
  .text\:uppercase {
    text-transform: uppercase;
  }
</style>
 
<p class="text:italic text:uppercase">
  Italic and uppercase
</p>

<style>
  .text\:italic {
    font-style: italic;
  }
 
  .text\:uppercase {
    text-transform: uppercase;
  }
</style>
 
<p class="text:italic text:uppercase">
  Italic and uppercase
</p>

<style>
  .text\:italic {
    font-style: italic;
  }
 
  .text\:uppercase {
    text-transform: uppercase;
  }
</style>
 
<p class="text:italic text:uppercase">
  Italic and uppercase
</p>