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 Chris Scott
Chris Scott
7,282 Points

Page styling appears to have been negatively affected by code organization/grouping.

After following the instructor's lead in re-arranging code under multi-line comments, my nav anchor elements lost their selected and hover state styles (last few lines of my CSS code). As far as I can tell my css is exactly the same as the instructor's at this point.

Any ideas on why this is happening would be greatly appreciated. Here's the code:

/* *******************************************
GENERAL
*********************************************/

body {
  font-family: 'Open Sans', sans-serif;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



/* *******************************************
HEADING
*********************************************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height:0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/* *******************************************
NAVIGATION
*********************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0;
}



/* *******************************************
FOOTER
*********************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}



/* *******************************************
PAGE: PORTFOLIO
*********************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%
  background-color: #f5f5f5;
  color: #bdc3c7;
}



/* *******************************************
COLORS
*********************************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color; #599a68;
}

/* nav background on mobile */
nav {
  background:#599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hovers {
  color: #32673f;
}
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Chris, I've edited your code so it appears correct in your post, you used forward ticks instead of back ticks.

3 Answers

Alex Heil
Alex Heil
53,547 Points

hi Chris Scott , let's have a closer look at your last line of css code:

 /* selected nav link */
    nav a.selected, nav a:hovers {
      color: #32673f;
    }

for the hover state you currently use :hover*s* - that's probably a typo at the end because it should be :hover (without the "s").

for the selected state. if you use a class with the name "selected" on the anchor then this syntax would be right, but if you don't have such a class in your html markup (which I can't tell as there's no html part to inspect) and want to target the selected (active) state then instead of .selected you would use :active

on a sidenote (this may be unrelated here, but happens often and is worth to double-check) always check that you end your declarations with a semicolon. for example in your gallery li styles after the margin there's no semicolon and this can cause the rules you defined after that to not work at all.

hope that helps and have a nice day ;)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Chris,

Can you try:

nav .selected, nav a:hovers {
  color: #32673f;
}

Your missing a semi-colon BTW

/* links */
a {
                                      color: #6ab47b
}

Here too

#gallery li {
  float: left;
  width: 45%;
                                        margin: 2.5%
  background-color: #f5f5f5;
  color: #bdc3c7;
}

Need to change semi-colon for colon here

header {
  background: #6ab47b;
  border-color                       ;             #599a68;
}

Hope this helps

Wayne Priestley
Wayne Priestley
19,579 Points

LOL,

I forgot the most important point,

Change :hovers to :hover

Chris Scott
Chris Scott
7,282 Points
Chris Scott
Chris Scott
7,282 Points

Thanks Wayne & Alex! Turns out that accidentally having an 's' at the end of :hover was throwing both rules off, including the .selected. And thanks for pointing out the missing semi-colons as well.

cheers,