1

I have a class for a specific font color, and another class for a border color. When I assign an element the class for both, the font color class takes over for both the font and the border.

See example: https://jsfiddle.net/e81jrzfu/

html {
  background: #fff;
}
.border-gold {
  border-color: #f4cc55;
}
.color-red {
  color: #FF0000;
}
.midquote {
        display: block;
        margin: 1em;
        padding: 0.6em;
        text-align: center;
        border-top: 0.12em dashed; 
        border-bottom: 0.2em solid;
    }
    .midquote .icon {
        display: block;
        margin-top: -1.4em; 
    }
    .midquote i {
        background: #fff;
        padding: 0 0.6em 0 0.6em;
    }

    .quoting {
        display: block;
    }

And the HTML:

<div class="midquote color-red border-gold">

   <span class="icon"><i class="fa fa-quote-left"></i></span>
   This is an amazing quote from someone.
   <span class="quoting">Jon Doe</span>
</div>
MultiDev
  • 10,389
  • 24
  • 81
  • 148

4 Answers4

1

You can just increase specificity of border-gold selector like this .midquote.border-gold or div.border-gold

What is Specificity?

If two selectors apply to the same element, the one with higher specificity wins

html {
  background: #fff;
}
.midquote.border-gold {
  border-color: #f4cc55;
}
.color-red {
  color: #FF0000;
}
.midquote {
  display: block;
  margin: 1em;
  padding: 0.6em;
  text-align: center;
  border-top: 0.12em dashed;
  border-bottom: 0.2em solid;
}
.midquote .icon {
  display: block;
  margin-top: -1.4em;
}
.midquote i {
  background: #fff;
  padding: 0 0.6em 0 0.6em;
}
.quoting {
  display: block;
}
<div class="midquote color-red border-gold">

  <span class="icon"><i class="fa fa-quote-left"></i></span> This is an amazing quote from someone.
  <span class="quoting">Jon Doe</span>
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
1

Your border shorthand rules in your .midquote selector are overriding the style you set with .border-gold. The easiest solution is to either just move the .border-gold after the .midquote rule, or increase the specificity of the .border-gold rule (e.g. div.border-gold).

jsFiddle example (moved rule)

jsFiddle example (increase specificity)

j08691
  • 204,283
  • 31
  • 260
  • 272
1

This is happening because of the way you've specified your borders in the .midquote rule:

border-top: 0.12em dashed; 
border-bottom: 0.2em solid;

These reset the border-color declaration from your .border-gold rule to currentColor, which refers to the color property. This is expected behavior.

You can fix this by using the longhands instead of the shorthands:

.midquote {
    display: block;
    margin: 1em;
    padding: 0.6em;
    text-align: center;
    border-top-width: 0.12em;
    border-top-style: dashed;
    border-bottom-width: 0.2em;
    border-bottom-style: solid;
}

Or you can rearrange the rules so .midquote comes before all the others (which is probably what you intended).

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
-1

if i understand it correctly you need to add !important for .border-gold for this as follow:

.border-gold {
  border-color: #f4cc55 !important;
}
.color-red {
  color: #FF0000;
}
Tanbi
  • 597
  • 5
  • 6