title: CSS Target Last Paragraph After Heading
body: <p>I've been looking how to edit the last paragraph after a heading using CSS. </p>
  
  <p>I thought <code>#div h1 ~ p:last-child</code> would do the trick, but it skips down past the second heading and edits the last paragraph before the list. I've been searching for awhile and came across a few advanced css help sites, but they're repeating themselves with the most common advanced selectors.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;h1&gt;Heading&lt;/h1&gt;
  &lt;p&gt;content&lt;/p&gt;
  &lt;p&gt;content&lt;/p&gt;
  &lt;p&gt;content&lt;/p&gt;
  
  &lt;h2&gt;Heading&lt;/h2&gt;
  &lt;p&gt;content&lt;/p&gt;
  &lt;ul&gt;
        &lt;li&gt;list&lt;/li&gt;
        &lt;li&gt;list&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#contentContainer &gt; h1 ~ p:last-of-type {
      border-bottom: 1px solid #000;
  }
  </code></pre>