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 How to Make a Website Customizing Colors and Fonts Use Classes in CSS

I am confused about the pseudo tags

Why is it that you have to declare nag a, nag a:hover twice... why does nav a:hover{} not work?? I am really confused

You're using the correct wording and not nag?

/* links */
a {
  color: blue;
}

/* nav link */
nav a, nav a:hover {
  color: red;
}

no I'm using nav... nav a, nav a:hover { ^^ why do I have to declare nav a, nav a:hover and not just nav a:hover...

Essentially you're selecting two elements and applying the same styling to them in your code here.

"nav a" is selecting the anchor elements on your navigation while "nav a:hover" is selecting them when your mouse is hovering over the link. If you are applying the same styling you will not see any chenges when you hover over the links in your navigation. Most often people style these different by bolding, underlining or changing the color of the link when a mouse hovers over it to indicate to the user that they're interacting with the web page.

Technically you don't have to declare each individually if you don't want the styling to change. However, if you DO want the styling to change you will need to declare separate styles for each scenario (regular link in the nav and links in the nav when hovered over). You would do this by splitting them up.

In the code below, all of my links would default to blue. My navigation links would then be overrwritten and show as red (only nav links). Then, when a mouse hovered over a nav link it would be red but then become bold as well.

/* links */
a {
  color: blue;
}

/* nav link */
nav a {
  color: red;
}

nav a:hover {
  font-weight: bold;
}