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
Beto Najera
7,072 PointsProblems with this quiz I can not find the answer, sorry.
/* Write your SCSS code below. */
p { a { color: red; }
a { color: blue; & .footer{ color: purple; } &:hover { opacity: 0.5; } } }
<!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>
/* Write your SCSS code below. */
p {
a {
color: red;
}
> a {
color: blue;
& .footer{
color: purple; }
&:hover {
opacity: 0.5; }
}
}
6 Answers
Ted Sumner
Courses Plus Student 17,967 PointsThis is the passing code:
p {
a {
color: red;
div.footer & {
color: purple;
}
}
> a {
color: blue;
&:hover {
opacity: 0.5;
}
}
}
When you have an exception you need to put the html tag in front it appears. It has been a while since I did this class and don't remember the details as to why the proper code is div.footer &.
Kathleen Sapp
12,776 PointsBeto- Give this a try:
p {
a {
color: red;
}
}
Kathleen Sapp
12,776 PointsDon't use the word css just: p { a { color: red; } }
Ted Sumner
Courses Plus Student 17,967 PointsEdited to double space between text and opening ` for quote.
Beto Najera
7,072 PointsThank you very much Kathleen, I will keep it in mind.
Kathleen Sapp
12,776 PointsIf the code helps you complete the challenge it would be awesome to get a 'best answer' from you. Thanks
Gunhoo Yoon
5,027 PointsI think the problem is that instructor is expecting very specific answer from you. Obviously, there can be many ways to accomplish this.
I haven't learned SASS but based on previous video (advanced nesting) I was able to come up with an idea which actually works but not accepted by instructor.
p {
a {
color: red;
.footer & {
color: purple; }
}
> a {
color: blue;
&:hover {
opacity: 0.5; }
}
}
So our goal is to target .footer p a.
Based on given situation, we already have p a which is the first nested loop.
Since the & refers to what has been built so far, if we put it inside our first nested loop, it will stand for p a
All we need to do now is adding .footer so it can target following p a which is .footer &.
This actually works (punch in my code from beginning of the question and hit check work to update preview).
However, it is not accepted by instructor. Maybe you can get a hint out of this since you watched all the previous videos.
Additionally, I will explain your logic error.
Your solution for last step points to p > a .footer which can't be found in given html form.
Beto Najera
7,072 PointsThank you! I will try that method too.
Ted Sumner
Courses Plus Student 17,967 PointsRemember that all coding is evaluated by a computer. The key to passing is not necessarily writing a code that works, but writing the code they ask for. People often run into problems by adding too much. For example, some people in the PHP courses respond to the instruction to echo $name with code something like this:
<h1><?php echo $name; ?></h1>
While that code is correct it fails the quiz because the computer is only looking for this:
<?php
echo $name;
?>
That is likely the problem here.
Gunhoo Yoon
5,027 PointsSorry but I had to down vote for this one. This doesn't help addressing the issue nor tries to solve the problem. The problem with OP's code is actually the logic not over qualified or unnecessarily verbose code. But it seems like you never bother to even read what OP wrote. I'm pretty sure with your experience with TeamTreeHouse you can easily come up with actual help.
Ted Sumner
Courses Plus Student 17,967 PointsI am sorry you feel that way. I only had a few minutes to look at this prior to going to work. I thought that your answer was very close to right if it was not right. I did not have time to do the challenge and find the answer. And for your information, it took me about 20 minutes to figure out the answer to step 4, time that I did not have earlier.
Gunhoo Yoon
5,027 PointsGunhoo Yoon
5,027 PointsUn-downvoted your previous answer.
I doubt why instructor decided to use more specific selector while doing so is less recommended in practice.
But again maybe that's how instructor does it since writing CSS vastly varies per person and important part is gaining maintainability over minor performance gain.
Beto Najera
7,072 PointsBeto Najera
7,072 PointsThank you very much, that was very useful!!!