Cascading properties in CSS

I am not able to understand the cascading in CSS.

.lastBtnOfSection > button { color:red; }
.sectionBtn { color:black; }

Here both are buttons contained in .lastBtnOfSection.

.sectionBtn is the class of the button. According to cascading the later should override but it worked only when I changed .sectionBtn to .lastBtnOfSection > .sectionBtn.


It’s because the selector .lastBtnOfSection > button is more specific than .sectionBtn.

The selector .lastBtnOfSection > button has a specificity calculation of 11 whereas the selector .sectionBtn is 10 (class selectors have a specificity of 10 and type selectors are 1).

As pointed out by Gray in the comments, this is a nice tool for automatically calculating these values.