Initially hiding a display:block to be shown with jquery.show()

Question

I am trying to get better about minimizing any unnecessary markup and using optimal CSS.

<label id="cart_promocode">Promo-code:
    <span><%= Html.TextBox("PromoCode") %>
       <a href="#" id="lnkApplyCoupon" class="hidden">Apply Coupon</a>
    </span>
</label>

The 'Apply Coupon' link should be positioned underneath the textbox. This is the css I am using. Note that the <A> is displayed as a block so it gets its own line.

#cart_promocode a
{
     display: block;
     margin: 4px 0 0 0;
     font-size: 93%;
     color: Blue;
}

.hidden {
     display: none;
}

I will show and hide it using jQuery with :

 $('#lnkApplyCoupon').show() and hide()

The problem is that I want the item to be initially hidden. The 'hidden' class applied initially doesnt work.

The best solution I have come up with is

$(function() {
     $('#lnkApplyCoupon').hide();
});

This will hide the apply coupon link when the page loads, but then if the user doesnt have Javascript enabled it will not initially be hidden - and in fact in that case I dont want it to EVER appear.

What am I missing - either a trick or a different approach to my CSS.

Answer 1

The 'hidden' class applied initially doesnt work

#cart_promocode a { display:block; }

Has a higher specificity ( 101 AFAIK ) than your other rule, specify the ID before the class and you'll have a higher specificity ( 110 AFAIK ).

Ids = 100, classes = 10, base selectors = 1.

#cart_promocode .hidden, .hidden { display:none; }

Two selectors because the second one will do a universal target.