Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Łukasz Czuliński
Łukasz Czuliński
8,646 Points

CSS issue when adding class via PHP.

I'm having an issue here. When I use :hover on my links the colors apply correctly. However, when I add a class via PHP (for marking the link as active) to the same element with identical CSS, only the background changes color but not the text.

#subnav a:hover{
  background:#2E2E2E;
  color:white;
}

.on{
  background:#2E2E2E;
  color:white;
}

As mentioned, only the background gets applied when I add the class via PHP. Any ideas here?

<li class="company"><a href="services.php" class="<?php if ($section == "services"){ echo "on"; } ?>">Services</a></li>

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Lukasz,

What css do you have before this? You probably have a specificity problem.

Are you by chance setting the color of your links like this? (further up the file)

#subnav a {
   color: some_color;
}

If so, you won't be able to change the color with the 'on' class by itself because the specificity is too low.

#subnav .on should work. Let me know if it's something else but we'll probably need to see more of the relevant css above.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Also, you can remove the duplication that you have like this:

#subnav a:hover,
.on {
  background:#2E2E2E;
  color:white;
}
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Nailed it. Thanks! Your suggestion of including the #subnav id with .on did the trick. I'm still grasping the specificity nuances.

Just above I have this in the CSS. It appears the offender was #subnav a{} as you guessed.

#subnav li{
  font-family:"Asap";
  font-weight:700;
  letter-spacing:1px;
  display:inline;
}

#subnav a{
  padding:8px 25px;
  color:#2E2E2E;
}

#subnav a:hover{
  background:#2E2E2E;
  color:white;
}

.on{
  background:#2E2E2E;
  color:white;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

An id has higher weight than a class which has higher weight than a type selector.

So in order to override the color you have to either match or exceed the specificity of #subnav a which is made up of one id and one type selector.

.on is only 1 class selector which isn't enough. By adding #subnav in front you end up exceeding the specificity of #subnav a

Also, the reason the background color worked out was because it wasn't previously set.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Yeah, I understand which has more weight, it's just that I'm still a bit too messy in CSS and get declarations lost in there. I also ripped my hair out while trying to override Bootstrap and Foundation defaults, where I sometimes can't change properties even when assigning new IDs.