CODEWITHSUNDEEP
css
Louismoore18
Louismoore18

Reputation: 167

current page different colour on nav

I don't think the title explains my problem very well. basically, on my nav bar, I want the current page to be a different colour.

so for example if all the nav links were black, I want the current page of home to be red. I've tried this by giving the current page link a class and then defining it a colour, however it doesn't seem to change.

heres my code: http://jsfiddle.net/SCd4h/

    <style>
.box {
text-align: center;
background-color: #F1F2F2;
border: 1.5px #D1D3D4 solid;
border-bottom: 3px solid red;
    margin: 5px;
    padding: 10px;
}
p {
font-size: 15px;
font-family: arial;
color: #585858;
}
.logo {
margin-left:70px;
margin-top: -160px;
}
a:visited {
  text-decoration: none;
  color: black;
  font-weight: normal;
}
a:link {
  text-decoration: none;
  color: black;
  letter-spacing: 500;
}
a:hover {
  text-decoration: none;
  color: #FC3B3B;
  background: white;
}
a:active {
  text-decoration: none;
  color: red;
  font-weight: normal;
}

ul {
list-style-type:none;
margin-right:50px;
margin-top: 60px;
padding:5px;
overflow: hidden;
font-family: 'Paytone One', sans-serif;
font-size: 18px;
}
li {
display:inline;
float:right;
margin-right: 30px;
}
.current {
font-family: 'Paytone One', sans-serif;
font-size: 18px;
color:red;
}
</style>


<body>
<ul>
<li><a href="index.html"/>HOME</a></li>
<li><a href="blog.html"/>BLOG</a></li>
<li><a href="photo.html" class="current"/>PHOTOS</a><li>
<li><a href="projects.html"/>PROJECTS</a></li>
</ul>

</br>
<img class="logo" src="louis2.png" alt="." width="149px" height="150px"/>
<div class="box">

</div>
<div class="box1">
</div>
<p>louismoore.net © All rights reserved 2012</p>
</body>

Upvotes: 0

Views: 293

Answers (3)

kinakuta
kinakuta

Reputation: 9037

I'd suggest a different approach rather than applying a class to the corresponding link for each page as you'll need to change the markup for your nav for each different page. Add a class to the body of each page identifying the page, then add another class to each link, identifying the link, then write css that combines them:

.home .home_link,
.blog .blog_link,
.photos .photos_link,
.projects .projects_link {
    color: red;
}

This way, the css is applied automatically without having to write different markup for the nav for each page.

Here's a jsfiddle to demonstrate.

Upvotes: 1

Dennis
Dennis

Reputation: 32598

a:link has more specifiers (a tag name AND a pseudo-class) than .current (just a class). You can override it by saying

a.current

since that has a tagName and a class, which overrides a tagName and pseudo-class.

Upvotes: 0

oomlaut
oomlaut

Reputation: 773

Your issue is specificity.

Try

a.current instead.

Also, remove the / from inside your opening A tags. Should be structured <a>...</a>

Upvotes: 5

Related Questions