Logan Byers Logan Byers - 1 month ago 5
CSS Question

How to make links in nav different color than links in body?

I apologize if this has already been asked, but I wasn't able to find the answer on here or Google. I have a website I am building and I want the links in the navbar to be white, but I want the rest of the body to have blue links. This should be pretty simple, but for some reason my CSS is not working to achieve this. I will put my code below I use SCSS so the syntax is a little different, but I have checked and my CSS file is correct when I format it.

nav {
@include border-radius(5px);
background-color: $navbackground;
width: 99%;
position: fixed;
padding: 2% 0 2% 0;
text-align: center;
a {
color: $fontcolor;
margin: 0 5% 0 5%;
&:hover {
text-decoration: underline;
}
}
}

body {
font-family: "Lato", sanserif;
background-image: url("../images/homebackground.png");
a {
@include text-shadow(#000);
color: $linkcolor;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}


I have also tried moving the color: $fontcolor; to nav instead of nav a, but that did not work either. I know I can use an inline style to achieve this, but I prefer to keep all my styles in a CSS file. Thanks in advance!

$fontcolor = white
$linkcolor = blue

Answer

Based on your CSS you actually have the same specificity level, on both selectors

nav a
body a
0 0 0 2

http://codepen.io/anon/pen/YGZvRL


Therefore the last declared style has precedence, in this case the body style. The quick solution is just change the order of the declaration:

  1. First general styles body
  2. After specific styles nav

http://codepen.io/anon/pen/XjkYoN


Or just increase the specificity of your nav selector.

http://codepen.io/anon/pen/vXdAba

Comments