I'm trying to figure out why one of my css classes seems to override the other (and not the other way around)
Here I have two css classes
.smallbox {
background-color: white;
height: 75px;
width: 150px;
font-size:20px;
box-shadow: 0 0 10px #ccc;
font-family: inherit;
}
.smallbox-paysummary {
@extend .smallbox;
font-size:10px;
}
and in my view I call
<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">
The font (The overlapping element) shows up as 10px instead of 20 - could someone explain why this is the case?
@extend .smallbox;
, which looks like non-standard cSS.@extend
- if it does what I think it does - and using both selectors on the same element..smallbox-paysummary
), and optionally make the CSS declaration more clearly specific (without relying on the order of appearance in the CSS file) by using.smallbox.smallbox-paysummary { font-size: 10px; }
.smallbox-paysummary
to have a smaller font, why are you making it smaller in the first place?