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
Mark Mueller
6,635 PointsSass Quiz-- stuck on class placement
2 q's : am I placing the class and selection in the correct place? Do I need to put html in front of .footer RE: sass quiz test 1 - 4th question Thx, M
p { a{ color: red; html.footer & { color: purple; } }
a { color: blue; &:hover { opacity: 0.5; } } }
9 Answers
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsOk, so here is the code that I passed the challenge with:
/* Write your SCSS code below. */
p {
a {
color: red;
div.footer & {
color: purple;
}
}
> a {
color: blue;
&:hover {
opacity: 0.5;
}
}
}
Mark Mueller
6,635 Pointsthanks for your help --
p {
a {
color: red;
.footer & {
color: purple;
}
}
> a {
color: blue;
&:hover {
opacity: 0.5;
}
}
}
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Pointsp {
a {
color: red;
html.footer & {
color: purple;
}
}
> a {
color: blue;
&:hover {
opacity: 0.5;
}
}
}
It looks fine to me. I don't think you need to put 'html' in front of '.footer' if you're using a class named "footer"
The code looks generally fine to me. Is it causing you problems?
Mark Mueller
6,635 PointsThanks for checking.
The selected footer link does not show up as purple whether it has html in front of the .footer class or not. Not passing quiz with this. Thx, M
code:
p { a { color: red; .footer& { color: purple; } } > a { color: blue; &:hover { opacity: 0.5; } } }
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsWhat does your html look like?
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsSomething is wrong here. Can you paste it between three backticks (`) so it gets formatted?
Mark Mueller
6,635 Pointsthanks for your help --
<!DOCTYPE html>
<html>
<head>
<title>Sass Basics - Code Challenge</title>
<link rel="stylesheet" type="text/css" href="page-style.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hampton's Blog</h1>
<div class="entry">
<h1><a href="#">Delicious Food in SF</a></h1>
<div class="content">
<p>
You know what my favorite restaurant in San Francisco is? The answer is that there are so many great restaurants that I couldn't choose one. But honorable mentions include <a href="#">Mr. Chow's</a>, <a href="#">Live Sushi</a> and <a href="#">Piccino</a>.
<span class="link"><a href="/info.html">Read More</a></span>
</p>
</div>
</div>
<div class="entry">
<h1><a href="#">Great Music</a></h1>
<div class="content">
<p>
Here are some of my favorite bands from years past and present: Belle and Sebastian, Pixies, and Daft Punk. Listening to music allows me to focus when I'm programming.
<span class="link"><a href="/info.html">Read More</a></span>
</p>
</div>
</div>
<div class="footer">
<p>
Thanks for reading my blog! Be sure to check out my <a href="#">other articles</a>.
</p>
</div>
</body>
</html>
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsHere is it formatted in case anybody else wants to help. I'm having a hard time finding any issues with it myself.
<!DOCTYPE html>
<html>
<head>
<title>Sass Basics - Code Challenge</title>
<link href="page-style.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hampton's Blog</h1>
<div class="entry">
<h1><a href="#">Delicious Food in SF</a></h1>
<div class="content">
<p>You know what my favorite restaurant in San Francisco is? The
answer is that there are so many great restaurants that I couldn't
choose one. But honorable mentions include <a href="#">Mr.
Chow's</a>, <a href="#">Live Sushi</a> and <a href="#">Piccino</a>.
<span class="link"><a href="/info.html">Read More</a></span></p>
</div>
</div>
<div class="entry">
<h1><a href="#">Great Music</a></h1>
<div class="content">
<p>Here are some of my favorite bands from years past and present:
Belle and Sebastian, Pixies, and Daft Punk. Listening to music
allows me to focus when I'm programming. <span class=
"link"><a href="/info.html">Read More</a></span></p>
</div>
</div>
<div class="footer">
<p>Thanks for reading my blog! Be sure to check out my <a href=
"#">other articles</a>.</p>
</div>
</body>
</html>
Mark Mueller
6,635 PointsNicholas -- thank you for all your patience and help. One last (ignorant) question: Why did I need to specify div.footer vs .footer--?
Thanks again.
Mark
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsMy best guess is that treehouse's parser was looking specifically for "div.footer." I don't think SASS or CSS require it. It is kind of a clue in the challenge text when it specifically says to select a "div" with the class of ".footer."
If it said select any element with a class of ".footer," then you'd have to use ".footer" but it specifically asked for a div.