CODEWITHSUNDEEP
htmlcss
Kam
Kam

Reputation: 6008

add color to list in html

I am very new to css and I am facing this issue

header.html

<div class="header">
    <div class="headright">  
        <div class="languages">
            <ul class="language1">
                <li class="active"><a href="login.php">Login</a></li>
                <li> | </li>
                <li class="active">EN</li>
                <li><a href="fr/index.php">FR</a></li>
            </ul>
         </div>
    </div>
</div>

class "active" successfully changes the color on "EN" but not on "Login".

Here's the css:

.headright {
    float: right;
    display: block;
    margin-top:-10px;
}
.headright .languages {
    display: inline;
    padding-right: 10px;
    float: left;
}
.language1 {
    float:left;
    display:inline;
    font-family: 'texgyreadventorregular';
}
.headright .headsites {
    float: left;
    display: inline;
    margin-right: 18px;
    font-family: 'texgyreadventorregular';
}
.headright .headsites ul li {
    list-style-type: none;
    display: inline;
    color: #ffffff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    clear: left;
}
.headright .languages ul li {
    list-style-type: none;
    display: inline;
    color: #ffffff;
    font-size:14px;
}
.headright .languages ul li a {
    color: #ffffff;
    font-size:14px;
}
.headright .languages ul li.active {
    color: #99cc00;
}

How can make the Login also change colors?

Upvotes: 0

Views: 64

Answers (2)

wickywills
wickywills

Reputation: 4204

That's because login is a link. Link tags carry default browser styling unless you override/target them specifically.

Change your CSS as follows. Change this:

.headright .languages ul li.active {
    color: #99cc00;
}

To this:

.headright .languages ul li.active,
.headright .languages ul li.active a {
    color: #99cc00;
}

This will apply your colour to the li tags with active, and also any links within them :)

Upvotes: 3

CumminUp07
CumminUp07

Reputation: 119

add to your css 

.headright .languages ul li .active a{
    //whatever effect you want here
}

Upvotes: 1

Related Questions