CSS Line Through not behaving the way I want it too - html

Question

Ok i have a simple question maybe i am missing something stupid here but I have this little block of html
<div class="span2">
<span class="price flRight salePrice">$11.25 <span>$4.99</span></span>
</div>
With this CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .salePrice span{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
But why is the line through on the second span I added important and figured it would be overwritten but it isnt. Why is this not taking?
I have a simple fiddle set up incase it helps http://jsfiddle.net/XJwns/
I am sure i am overlooking something stupid here but please point me to my mistake

Answer 1

Your CSS is telling it to put a line through .salePrice, which is what it is doing, child <span> and all.
The more "standard" way of doing this is:
<span class="price flRight salePrice"><del>$11.25</del> <ins>$4.99</ins></span>
You can then style the old and new prices independently.

Answer 2

Because you can't "cancel" the line-through coming from the parent element. You can, of course, separate them into two siblings spans.
HTML
<div class="span2">
<span class="price flRight salePrice">$11.25</span> <span class="other">$4.99</span>
</div>
CSS
.span2 .salePrice{text-decoration:line-through;}
.span2 .other{color:#cd202c;font-weight:bold;margin-left:5px;text-decoration: none !important;display: block;}
See here: http://jsfiddle.net/XJwns/1/

Answer 3

It's because your span's are nested, the outer strikethru overlays your inner span. Unnest them and apply styles separately, so you don't have to use !important:
<div class="span2">
<span class="price flRight">$11.25</span><span class="salePrice">$4.99</span>
</div>
.span2 .price{text-decoration:line-through;}
.span2 .salePrice {color:#cd202c;font-weight:bold;margin-left:5px;display: block;}
http://jsfiddle.net/UBsm8/1/

Answer 4

if you set nested child as inline-block, text-decoration is applied because layout is triggered somehow.
http://jsfiddle.net/XJwns/4/
to have this inline-box to slide under text, you need parent to have a reduced width, this is more like a trick.
.span2 .salePrice {
text-decoration:line-through;
}
.span2 .salePrice span {
color:#cd202c;
font-weight:bold;
margin-left:5px;
text-decoration: none !important;
display:inline-block;
}
.salePrice {
display:inline-block;
width:1em;/* will force to wrap words, boxes in lines */
}