CODEWITHSUNDEEP
css
Chain
Chain

Reputation: 627

How do I change the color or text in an anchor tag by targeting the class within the anchor tag?

can some one explain why the following happens:

<a href="#" class="test">Test</a>

<style type="text/css">
.test {
border: thin solid blue;
color: red;
}
</style>

This only creates the border but doesn't turn the text red when using a class.

However, this works in turning the text red when using an id instead:

<a href="#" id="test">Test</a>

<style type="text/css">
#test {
border: thin solid blue;
color: red;
}
</style>

Why does the class not change the text color, while using id does work?

Thanks!

Upvotes: 0

Views: 19063

Answers (3)

Philip G
Philip G

Reputation: 4104

try changing the style tag into this:

<style type="text/css">
   a.test{
      border: thin solid blue;
      color: red;
   }
</style>

Upvotes: 1

Shmiddty
Shmiddty

Reputation: 13967

See this example: http://jsfiddle.net/mD5us/4/

<div>
    <a href="#" class="test">Test</a>
</div>

CSS

​body div a.test{
    color:yellow;
}
body div .test{
    color:brown;
}
body a.test{
    color:purple;
}
body .test{
    color: orange;
}
a.test{
    color:green;
}
.test {
    border: thin solid blue;
    color: red;
}

You might think that the link will be red, but it will actually be yellow since that is the most specific declaration.

Upvotes: 2

echo_Me
echo_Me

Reputation: 37233

use this

demo here

 <a href="#" class="test">Test</a>

 <style type="text/css">
a.test {
border: thin solid blue;
color: red;
}
</style>

Upvotes: 3

Related Questions