nested selectors for direct children

Question

Add nested selector which makes all <a> tags that are direct children of <p> tags blue.

index.html

<!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>

style.scss

/* Write your SCSS code below. */

.entry{
    p{
    > a{
      color:blue; 
    }
    }
}
 p{
> a{
color:blue;
}
}

Answer 1 · 2016-11-20T12:22:36Z

November 20, 2016 12:22pm

At this point (Challenge Task 2 of 4), the code should be like this:

 p {

  a {
    color: red;
  }

  > a {
    color: blue;
  }

}

Welcome to the Treehouse Community

Looking to learn something new?

Himal Karmacharya

Himal Karmacharya

nested selectors for direct children

1 Answer

Kallil Belmonte

Kallil Belmonte

Christina Freyhult

Christina Freyhult