CSS Custom CSS Property, warum gewinnt hier xy?

[Hendoul]

Hi

Ich bin noch ein Neuling was CSS Variablen angeht und ich verstehe noch nicht ganz wann welche zum Zug kommen wenn mehrere mit gleichem Namen vorhanden sind. Hier ein Beispiel:

https://codepen.io/GarfieldKlon/pen/yLrepwa

<div class="link-area">
  <span class="button button--second">
    <span>Blog</span>
  </span>
</div>

.button {
  --color-text: yellow;
  color: var(--color-text);
}

.button--second {
  --color-text: green;
  --color-text--second: red;
}

.link-area {
  --color-text: var(--color-text--second);
}

Warum ist der Text "Blog" grün und nicht gelb oder rot?
.button nimmt die Farbe via .button-second
Aber warum?

Und wenn ich die Klasse link-area zu den anderen schiebe wird die Schrift rot, aber warum?

<div>
  <span class="link-area button button--second">
    <span>Blog</span>
  </span>
</div>

 

[floq0r]

Wenn CSS rules gleichwertig sind dann gewinnt die jeweils letzte Definition (von oben nach unten).

 

[Hendoul]

Aber im ersten Fall "grün" nimmt er das von .button--second, warum nicht das von .link-area?

Und wenn ich div.link-area schreibe, müsste ja immer diese gewinnen, da spezifischer? Egal in welcher Reihenfolge. Aber das tut sie nicht. Der Text bleibt grün.

 

[floq0r]

Weil .link-area der parent ist und das formatting vom child overruled