CodePark/ questions / Cascade, specificity & inheritance
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Cascade, specificity & inheritance

What colour is .btn?

@layer base, theme;

@layer base {
  .btn { color: red !important; }
}
@layer theme {
  .btn { color: blue !important; }
}
.btn { color: green; }
red

Red is right. Important declarations beat normal ones, so the unlayered green loses. Among important declarations, the layer order is reversed. So the earlier layer, base, wins over theme.

Blue is the tempting wrong answer. A later layer like theme wins only for normal declarations. And for normal declarations, the unlayered green would beat all layers.