title: Remove border with :first-child :before
body: <p>I have read a lot of examples and snippets but I can't figure it out how to solve this problem. 
  I have a list element with a sub-list. then I have a border-top for all these elements. I am managing to remove the first border top but it does not work, not even with classes.</p>
  
  <p>Here is the code.</p>
  
  <pre><code>    &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;ABOUT OWSD&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;WHY OWSD&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Objectives&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Women and Gender&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Success stories&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gender insite&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Partners&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;NETWORK&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CAREER DEVELOPMENT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;RESOURCES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;RESOURCES&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/nav&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>nav a {
    display: block;
    text-decoration: none;
  }
  
  
  
  ul li a{
    position: relative;
    left: 0px;
    color: #1d5237;
    background-color: #1a1a1a;
    font-weight: 600;
    font-size: 16px;
    padding: 20px 0px 20px 20px;
    width: 100%;
  }
  
  
  ul li a::before{
    content: '';
    border-top: 1px solid #1d5237;
    position: absolute;
    top: 1px;
    width: 100%;
  }
  
  
  ul li a:hover,
  ul li a:active,
  ul li a:focus{
    color: #4a9367;  
  }
  
  
  
  li ul li a{
    position: relative;
    display: noe;
    left: 0px;
    color: #cccccc;
    background-color: #2a2a2a;
    font-weight: 400;
    font-size: 16px;
    padding: 18px 0px 18px 37px;
    width: 100%;
  }
  
  
  li ul li a::before{
    content: '';
    border-top: 1px solid #666666;
    position: absolute;
    top: 1px;
    width: 100%;  
  }
  
  
  li ul li a:hover,
  li ul li a:active,
  li ul li a:focus{
    color: #cccccc;
  }
  </code></pre>
  
  <p>Also, I reach my second list element with <code>li ul li a</code> is this correct? Is there a way better to write it?</p>