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 Sass Basics (retired) Getting Started with Sass Advanced Nesting

Matthew Clark
Matthew Clark
7,255 Points
Posted by Matthew Clark
Matthew Clark
7,255 Points

What is the issue with my code

p { & a > {color: red; }}

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Matthew,

If you're on task 1 then you don't need the direct child combinator yet.

It wants all links within paragraphs to be red. You only need to nest the a selector within the p selector.

p {
  a {
    color: red;
  }
}

This will create the descendant selector p a

You only need to use the & when you need something other than the default behavior. The default behavior is to place the parent selector in front of the nested selector with a space between them.

This works too but it's redundant to use the parent selector in this case:

p {
  & a {
    color: red;
  }
}
Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Hello Matthew,

The & symbol is a reference to the parent of the selector. So your code

p { & a > {color: red; }}

becomes

p a > {color: red; }}

If you mean for the rule to select the direct child a elements of the p elements then you probably wanted to write something like

p { & > a  {color: red; }}

which become

p > a {color:red;}

I hope this helps.

-Agapito