nth-of-type. CSS Selector

Question

                <style>
            /* topnav and footer nav */
                #topnav ul{
                    list-style-type: none; 
                    text-align: left;
                    margin: 0;
                    padding-left: 0;
                    padding: 0;
                }
                #topnav li{
                    list-style-type: none; 
                    display: inline;
                    margin: 0;
                    padding: 0;
                }
                #topnav li ul{
                    display: inline;
                    padding: 0;
                }

                #topnav .menu li a
                {
                    color: white;
                    //background-color: red;
                    display: block;
                    float: left;
                    height: 31px;
                    color: white;
                    width: 125px;
                    text-decoration: none;
                    font: 15px arial bold;
                    font-style: italic;
                    line-height: 40px;
                    border-right: 1px solid black;
                    text-align: center;
                }
                #topnav a:nth-of-type(7)
                {
                    color: red;
                }
            </style>
            <div id="topnav" style="height: 36px;">
            <div class="menu-menu-1-container"><ul id="menu-menu-1" class="menu">
            <li id="menu-item-63" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-63">
            <a href=">Home</a></li>
            <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64">
            <a href="">About</a></li>
            <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
            <a href="">Repairs</a></li>
            <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67">
            <a href="">Door Openers</a></li>
            <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74">
            <a href="">Testimonials</a></li>
            <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66">
            <a href="">Contact Us</a></li>
            <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69">
            <a href="">Specials</a></li>
            <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65">
            <a href="">Blog</a></li>
            </ul>
            </div>  
            </div>

My intent was to select the 7'th a element in the menu and change the font color to red. Nothing is happening all the text remains white. Is there some way to change the CSS so that the a element with the contents "Specials" is in red text?

Thank you for posting...

Answer 1

Try

#topnav li:nth-of-type(7) a
{
    color: red;
}

instead.