Question

I have my HTML set up as follows

<div>
    <ul>
        <li></li>
    </ul>
    <ul>
        <li>
            <a class="nodecoration"></a>
        </li>
    </ul>
</div>

CSS:

.nodecoration {
    text-decoration:none;
}

When I change my anchor tag to <a id="nodecoration"></a> and change the CSS to:

#nodecoration {
    text-decoration:none;
}

The element now styles. Why is this?

Side note: I am also using Twitter Bootstrap, is the CSS from that interfering?

Answer 1

This is an indication that another style rule has precedence over that rule. You may want to make that rule more specific by using a.nodecoration which should increase its precedence.

FYI, tools like firebug for Firefox will tell you which rule(s) have the higher precedence.