How can I override Pseudo Classes in CSS3

Question

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?

Answer 1

The proper way to override something in css in general all you have to do is to rewrite it again

.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid red /*we will override this*/
}

<div class="red blue">Text</div>

Now we override it

.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid red /*we will override this*/
}
.blue:before, .blue:after {
  border: 2px solid blue
}

<div class="red blue">Text</div>

But you can clean this up like this

.red:before, .red:after {
  content: '';
  width: 16px;
  height: 16px;
}
.red:before, .red:after {
  border: 2px solid red 
}
.blue:before, .blue:after {
  border: 2px solid blue
}

<div class="red blue">Text</div>

Answer 2

A more specific rule should help:

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

Reference: MDN - Specificity