How to change color of only text of anchor link?

Question

I have code like this

<a href="#" title="some title">
  <span>Do not change color of this text</span>
  Want to only change this text color
</a>

I want to change the color of anchor tag text only, not color of text in span. Using CSS not jQuery.

Answer 1

Create a style to ensure the correct colors are being applied:

a {
    color: #00f;
}
p, a span {
    color: #000;
}

This sets the color of normal text (p) and spans inside links (a span) to black, whereas it sets the color of the rest of the text in links to blue.

Answer 2

You would have to apply two styles - one to your a tag and one to your span tag:

a {color:#000000; /*new colour*/}
a span {color:#aaaaaa; /*originalcolour*/}

Answer 3

I am assuming you have a CSS for the anchors. Why not create a second CSS for the span within the anchor?

a span {color:#000000;}