Question

I have the following html text.

<ol class="otherstufflinks">
    <li> 
        <a href="./pythonNotes/index.html">Python notes</a>
    </li>
    <li> 
        <a href="./figure.html">Cool figure made using</a> 
        <a href="http://mbostock.github.com/d3/" class="nestedlink">d3.js library.</a>
    </li>             
</ol>

The relevant parts in my css file are:

a:link, a:visited {
    color: steelblue;
    text-decoration: none;
}

a:hover {
    color: rgb(210,135,60);
}

.otherstufflinks > li,
.otherstufflinks a:link, .otherstufflinks a:visited 
{
    font-weight: normal;
    color: rgb(75,75,75);
}

.otherstufflinks a:hover  {
    color: rgb(210,135,60)
}

I want to choose a different color, say red, for the link with the class nestedlink. Would appreciate if someone can tell me how to do that? I tried the following but none of them work.

First try:

.nestedlink a:link, .nestedlink a:visited {
    color: red;
}

Second try:

.otherstufflinks .nestedlink a:link, .otherstufflinks .nestedlink a:visited {
        color: red;
   }

I don’t see where I am going wrong. Thanks for your help.

Answer 1

a.nestedink:link, a.nestedlink:visited {
color: red;
}

I believe with the a and only using .nestedlink, the default a:link property would override the .nestedlink.