CSS - Reason for border-X-color not applied after a call to element[attribute^=value]

Question

I have the following markup :

HTML

 <article class="card big-number border-green">     
   <p class="number">5</p>
  </article><!-- /card-two -->

CSS

article[class^='border-'], article[class*=' border-'] {
    border-left : 1px solid ;
}

.border-yellow {
   border-left-color: yellow;
}
.border-green {
       border-left-color:  green;
}
.border-blue {
      border-left-color:  blue;
}
.border-red {
      border-left-color:  red;
}

The issue is that the colors are not being applied, unless I specify element like so :

article.border-red {
          border-left-color:  red;
    }

I know I can resolve it using a catch-all rule like

[class^='border-'], [class*=' border-']

but the reason for the question is that I would very much like to understand the REASON for that behavior. isn't 'border-color' considered a rule for ANY element that contains this class ( including 'article' in my case ..) and have a declared border property ?

Tested on Chrome, Firefox .

Laurens Deprost · Accepted Answer · 2018-12-31T03:17:27.303

Edit:
Ok so the real issue here is that the border-left-color gets overridden by the value from border-left : 5px solid; (which is currentColor).

Why? The culprit here is

article[class^='border-'], article[class*=' border-'] {
    border-left : 1px solid ;
}

which has higher specifity than .border-green
See Specificity Calculator.

The reason is that border-left : 1px solid; sets the border color to currentColor (black) for each article.
This overrules the border-left-color of the .border-green class.
Notice how adding !important to .border-green changes the output.

article[class^='border-'], article[class*=' border-'] {
    border-left : 5px solid ;
}

.border-yellow {
   border-left-color: yellow;
}
.border-green {
       border-left-color:  green !important;
}
.border-blue {
      border-left-color:  blue;
}
.border-red {
      border-left-color:  red;
}

 <article class="card big-number border-green">     
   <p class="number ">5</p>
  </article><!-- /card-two -->

but by the transitive property ( cascading ) of CSS , if the `.border-color` rule comes **after** the general rule in order of inclusion, shouldn't that be applied ? my question is exactly that - **why** it is overridden .. — Obmerk Kronen, Dec 31 '18 at 02:16
Ok, thanks, i will try to read more about specificity. TNX.. . — Obmerk Kronen, Dec 31 '18 at 03:27

CSS - Reason for border-X-color not applied after a call to element[attribute^=value]

1 Answers1