How can I override Pseudo Classes in CSS3

css

Solution

A more specific rule should help:

div.blue:before, div.blue:after {
  border-color: blue;
}

Reference: MDN - Specificity

Problem

I defined the pseudo class `red:before` and `red:after`, which contain a border-color hexcode. Now I need to switch the color from red to blue using another CSS class named `blue`. Here is my Html: ``` <div class="red blue">Text</div> ``` And this is my CSS: ``` .red:before, .red:after { border-color: red; } ``` How can I set the CSS for `.blue` to make the border-color blue?

Original source