CSS overrides elements a with b

Question

in my CSS I have

.footer a {color :red}
.footer b {color :green}

in code: <b><a> ... </a></b> .... <a>..</a>

It shows all in color red. I want to specify different and <a>..</a> colors, but <a> overrides <b> ..How should I proceed?

Answer 1

Note that .footer a essentially means "All Anchor elements in an element with class footer" while .footer b means "All bold elements in an element with class footer". If your HTML is something like this:

<div class="footer">
<b>Lorem Ipsum Dolor</b>
</div>

It would make sense that it is turning green.

Answer 2

The a element will be red unless you style it differently. Since it has a style it isn't going to inherit.

.footer a {color :red}
.footer b,
.footer b a {color :green}

Answer 3

Try this:

.footer b,
.footer b * {
    color: green
}

The selector .footer b * additionally selects all descendant elements of b.

Answer 4

.footer b {color :green}
.footer a {color :red}

If you declare like above, the second definition will override the first.

---

Note: However, if you only want <a> which are inside (children of) <b>, then you should use

.footer b a {color :red}

Answer 5

<b><a> ... </a></b> .... <a>..</a>

In other words, the bold tag contains an a tag. Text within the a tag is, according to the CSS, red. This overrides the styling for the b tag.

Try this CSS:

.footer a {color :red}
.footer b a {color :green} /* Apply rules to a tags within bold tags */

On the other hand, you say that everything is green, when I'd expect everything to be red. This suggests an HTML error. Run the HTML through the W3C Validator.

Answer 6

Also, use Firebug to debug what is happening to your CSS. It's free, easy to install and extremely helpful:

http://getfirebug.com/