Using non-alphanumeric characters in CSS

Posted on June 9, 2020

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>

Continue reading

June 13, 2020JavaScript

Creating number ranges

We can create a sequence of numbers by spreading the keys of one array into another array. We can then change that range any way we like.

Read full article

Read all snippets →