A CodePen by Bermon Painter. Parent Selectors

index.html

<h1>Parent Selectors</h1>
<p>A parent selector lets you reference the parent when nesting. It's handy for things nesting some of the psuedo selectors or referencing elements, classes or ID's further up the DOM tree.</p>

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
    
  

style.scss

@import "compass";
h1 {
  font-size: 20px;
}
nav {
  border-bottom: 1px solid #ccc;
  
  ul {
    list-style: none;
    margin: 0 3%;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  a {
    background-color: #efefef;
    border: 1px solid #ccc;
    border-bottom-width: 0;
    color: #666;
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    
    &:hover,
    &:focus{
      background-color: #ccc;
    }
    &:active{
      background-color: #666;
      border-color: #666;
      color: #efefef;
    }
  }
}