CODEWITHSUNDEEP
css
Otaku Kyon
Otaku Kyon

Reputation: 445

How can I override Pseudo Classes in CSS3

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?

Upvotes: 5

Views: 3269

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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>

Upvotes: 3

emmanuel
emmanuel

Reputation: 9615

A more specific rule should help:

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

Reference: MDN - Specificity

Upvotes: 3

Related Questions