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
Loren Cardella
Python Web Development Techdegree Student 8,096 PointsWe want to add an exception for <a> tags that are in the <div> with a class of .footer: those links should be purple. Us
I'm having trouble adding an exception to a Sass parent selector.
<!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;
&:hover {
opacity: 0.5;
div .footer & {
a {
color: purple;
}
}
}
}
}
1 Answer
Austin Whipple
29,725 PointsLoren,
You have the right idea and are pretty close! First your CSS for the exception itself looks good except for a couple things. There's an extra space between div and .footer (right now you're selecting .footer elements that are inside of a div) and the ampersand should replace the <a> itself.
Should look like:
div.footer & {
color: purple;
}
Next, the challenge is asking you to make an exception to the <a> tag rule rather than exception to the direct <p> descendant :hover rule (where it is now), so you'll want to move your exception with the post-selector ampersand into that block instead.
To learn more about the post-selector ampersand (for new ideas on the location and why the <a> isn't needed in the div.footer declaration) check out this CSS-Tricks article.
Take another crack at finding the right spot and let me know if you need another clue!
Loren Cardella
Python Web Development Techdegree Student 8,096 PointsLoren Cardella
Python Web Development Techdegree Student 8,096 PointsI read your post multiple times. I re-watched the video preceding this code challenge. I read the article to which you linked. I finally completed the challenge. What a ridiculous waste of time. Sass must be for people who code CSS with deeply ingrained bad habits.
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsYes and no. Sass can be immensely helpful in producing DRY (Don't Repeat Yourself) code with variables, nesting selectors rather than repeating the same string of elements over and over, and using formulas and mixins to do lots of complex stuff. But for a basic site and a basic stylesheet, it can be more frustrating than helpful (like any framework or tool). Though once you get used to using Sass, it's hard to find a project where it isn't helpful.
All that said, it certainly helps prevent bad habits, but can also create its own set of things to avoid. A big one is overly-specific selectors (nesting four or more levels deep) that become too fragile and limited in scope. Nothing can solve all the problems.
If Sass seems too annoying now (I know it was for me at the start as well), I recommend completing this course, taking some time away from it to write traditional CSS, and then start implementing Sass slowly in projects here and there. The great thing about it is you can use it as much or as little as you want. Can just clean up selectors here and there by nesting , or go all in with the complicated stuff.