Just assume I have a few <a> links in one <div> (not shown in code) that I want to be one color and a few more <a> links in a different <div> to be a different color. I thought this would work. What don't I understand? Thanks. a.info <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="link.css" type="text/css" /> <title>Link_color</title> </head> <body> <div class="info"> <div class="list"> <div> <span> <strong> <a href="blabla">BlaBla</a> </strong> <span class="status">Bla bla bla bla bla bla.</span> </span> </div> <div> <span> <strong> <a href="blabla">BlaBla</a> </strong> <span class="status">Bla bla bla bla bla bla.</span> </span> </div> </div> </div> </body> </html> body {background-color: rgb(240,240,240); color: rgb(51, 51, 51); font-family: Helvetica,sans-serif;} a {color: rgb(255,55,255); text-decoration: none;} a.info {color: rgb(5,5,5); text-decoration: none;} .info { background-color: #FFFFFF; border: 1px solid rgb(150, 150, 150); margin: 4px 3px 5px; padding: 0 0.4em 0.4em; } .list { border-top: medium none; font-weight: normal; overflow: hidden; padding: 0.4em 0; } .status { word-wrap: break-word; }
This is how you do it HTML <div id="div1"><a href="#">link</a></div> Code (markup): CSS #div1 a:link, a:visited { color: #000; text-decoration: none; } #div1 a:hover, a:active { color: #d40001; text-decoration: none; } Code (markup): Hope this helps.
Thank you very much. I guess when it comes to links I cannot use a class like a.whateverclass.. I must use an ID. The something.whateverclass is reserved for other uses.
Nope, you just had the selector order reversed. It works when you change it to .info a To use a.info, put the class inside the anchor eg. <a class='info' href='#'> But the stuff in the info class further down will also get added, or overwrite what has already been set. To keep them separate, rename one of the classes.