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
Josh Baruch
806 PointsSelected Color not working
My hover is working, but the selected class isn't working. Here's my CSS and HTML codes. HTML: <li><a href="index.html"class:"selected">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a
CSS:
/******************** SITE WIDE ********************/
a {text-decoration:none;}
img { max-width:100%; }
body { font-family:'Gochi Hand', cursive; }
h3 { margin:0 0 1em 0; }
/WRAPPER IS SECTIONS AND FOOTER/
wrapper {
max-width:940px; margin: 0 auto; padding: 0 5%; }
/LOGO REFERS TO H1, H2/
logo {
text-align:center; margin: 0; color:#fff; }
H1 { font-family: 'Londrina Outline', cursive; margin: 15px 0; font-size: 4em; font-weight:400; line-height:1em; color:#A691D1 }
H2 { font-family: 'Londrina Outline', cursive; font-size: 2em; font-weight:normal; line-height: 1em; margin:0 0 0; }
nav { font-family: 'Gochi Hand', cursive; font-size: 1.5em; font-weight:bold; text-align:center; }
/Header Color/ header { background:#6a47b3; border-color:#599a68; float:left; margin: 0 0 30px 0; padding:5px 0 0 0; width:100%; }
/Navigation Background/ nav { background-color:#977ECA; }
nav ul { list-style:none; }
nav li { display:inline-block; }
nav a { padding:15px 10px; } /Navigation Links/ nav a, nav a:visited, { color:#A691D1; }
/Navigation Hover/ nav a.selected, nav a:hover { color:#A691D1; }
/site body/ section { background-color:#fff; color:#9a2; }
/Footer/ footer { font-size:0.75em; text-align:center; clear:both; padding-top:50px; }
.social-icon { width:20px; height:20px; margin:0 5px; }
/Gallery Formatting--Columns/
gallery {
margin:0; padding:0; list-style:none; }
gallery li {
float:left; width:45%; margin:2.5%; background-color:#f5f5f5; color:#9a2; }
gallery li a {
margin:0%; padding:0%; font-size:1em; text-align:center; }
/Page: ABOUT/ .profile-photo { display:block; max-width:150px; margin:0 auto 30px; border-radius:100%; }
10 Answers
Madison Lybrand
1,238 PointsFrom what me and my friend looked at it and it seems all in order. We believe that maybe to close the work desk and reopen it. Or save then open the view tab because sometimes you need to do that to see any new modifications you do to it.
Madison Lybrand
1,238 PointsFrom what me and my friend looked at it and it seems all in order. We believe that maybe to close the work desk and reopen it. Or save then open the view tab because sometimes you need to do that to see any new modifications you do to it.
Madison Lybrand
1,238 PointsFrom what me and my friend looked at it and it seems all in order. We believe that maybe to close the work desk and reopen it. Or save then open the view tab because sometimes you need to do that to see any new modifications you do to it.
Madison Lybrand
1,238 PointsOH SORRY DIDNT MEAN TO POST THAT THREE TIMES!!
Salamat Ali
202 PointsIf I understand correctly you are trying to do:
a:selected {css here}
like you would
a:hover {css here}
The a tag doesn't have a selected Pseudo Class, you need to add that yourself using javascript.
Here are the valid Pseudo Classes available for the a tag:
a:link {color:#FF0000;} /* unvisited link / a:visited {color:#00FF00;} / visited link / a:hover {color:#FF00FF;} / mouse over link / a:active {color:#0000FF;} / selected link */
Josh Baruch
806 PointsNo but it's under the nav links
Steven Chin
2,001 PointsI agree.
You can also have the pseudo class focus as another alternative.
a:focus { css here; }
Josh Baruch
806 PointsI don't know how to use java. I'm following the HTML and CSS "How to make a website" and in his, it's working but on mine it isn't. Not surpposed to need any java
Emma Willmann
Treehouse Project ReviewerI did this a couple weeks ago, so I'm looking back at the code I have from my completed site. I have three different colors set: one just for normal links, one for nav a and nav a:visited, and a third for .selected and :hover. I'm only seeing the nav a and nav a:visited, and the .selected & :hover in your code. Plus, the two colors are the same, so there's no change at all. This is what I have:
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Josh Baruch
806 PointsThey're both still there. And I changed the color. The hover works but the selected doesn't.
Josh Baruch
806 PointsWorks now! Needed to be an equal sign instead of a colon.