This is a very quick post on how to start your CSS class name with a double hyphen Ex: <div class="message --is-danger> Watch out </div>.

I try me best to keep the post simple and direct to the point; so lets consider the following simple example

  <div class="message --is-danger"> You are in a dangerous zoon! </div>

  .message {
  color: #fff;
  background: orange;
}

.message.--is-danger {
  background: red !important;
}

Its a very basic example, but lets crack it for a bit.

Our <div> has the class name --is-danger so we should expect to see a red background color right? Well, not really, as this won't work and the <div> will still have the orange (at least for Safari, and at the time ⌚️ of writing this post).

Solution:

The solution is super simple, and by reading the title of this post "Escaping CSS rules" you will get the point tho. Anyway, lets put the answer by adding a / before the class names stars with double hyphen

Here you go

  .message {
  color: #fff;
  background: orangered;
}

.message.\--is-danger {
  background: red !important; /* Adding the \ to escape the double hyphen (Its weird, but magically works) 👌🏼 */
}

DEMO [Test it on Safari and IE please to see the difference]

References

To know more, please read here Escaping CSS rules

With .


364 0 1