Selecting a link via css

Question

I want to select the link with the id "test" within my navbar so they are white. This is my code for the html..

what CSS is needed to select it? thanks!

<div id="top">
 <br/>
 <img src="images/logo2.png" alt="Chez Ricardo logo"/>
 <img id="fancy" src="images/fancyFood3.png" alt="Chez Ricardo fancy food"/>
 <div class="nav_bar">
        <ul>
            <li><a id="test" href="index.html">Home</a></li>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="reservations.html">Reservations</a></li>
            <li><a href="menu.html">Menu</a></li>
        </ul>
    </div>

Answer 1

You can just select it directly by id:

#test {
    color: white;
}

Any html element with an id="whatever" attribute can be selected with css by just adding a hash mark in front, like #whatever .

And generally speaking, you can just name an element like div to select all of that element, and you can use .whatever to select classes (eg class="banana" => .banana ). You can also combine them (eg <div class="banana"> => div.banana ). So, just for another example, the full path of your test element is div#top div.nav_bar ul li a#test .

Answer 2

How do you mean ?? Just changing the color of the id test if it is selected?

I think this should work:

#test a:active {color:#FFFFFF;}  /* active link */