CODEWITHSUNDEEP
htmlcss
user3043645
user3043645

Reputation: 31

Custom class does not override CSS

I am having trouble overriding CSS with styling applied to a custom class. I have applied a class to a link in the side menu. This is to change the color of text for the currently viewed page. From what I have read I need to be more specific when targetting the link but everything I have tried is not working.

HTML:

<div class="left_column">
    <nav class="side_nav">
        <ul>
            <li><a class="current_side" href="contact.html">CONTACT</a></li>
            <li><a href="#">DIRECTIONS</a></li>
            <li><a href="#">CAREERS</a></li>
        </ul>
    </nav>
</div>

CSS:

.left_column{
    float: left;
    width: 10%;
    height: 700px;
    padding-right: 10px;
    background-color: #f5f5f5; 
}
.side_nav{
    width: 125px;  
    padding: 50px 0 0;
}
.side_nav ul, li{
    list-style: none; 
}
.side_nav ul li a{
    display: block; 
    width: 125px;
    line-height: 1.5em;
    font-size: .95em; 
    text-decoration: none;
    text-align: right; 
    color:#666666;
}
.current_side a{
    color: #000000;
}

Upvotes: 0

Views: 805

Answers (3)

Nicolae Olariu
Nicolae Olariu

Reputation: 2555

You just need to be more specific when targeting your element:

.side_nav ul li a.current_side {
    color: #000000;
}

Upvotes: 0

Quentin
Quentin

Reputation: 943547

.current_side a means "An a element that is a descendant of an element that is a member of the class current_side.

You don't have such an element. The a element is a member of that class itself so to select the element you need a.current_side.

However, that will be a type selector + a class selector and .side_nav ul li a will also match the element but with the more specific 3 type selectors + a class selector, so you also need to make your selector more specific.

 .side_nav ul li a.current_side

Upvotes: 3

Brendon Sled
Brendon Sled

Reputation: 116

You just need .current_side{} since it is the a element.

Upvotes: 0

Related Questions