title: Target specific h2 on a page
body: <p>I have some HTML like this.</p>
  
  <pre><code>&lt;div class="platform-content"&gt;
    &lt;div class="content-wrapper"&gt;
      &lt;section class="entry"&gt;
        &lt;article class="post-type-page id123 page type-page status-private hentry" id="id123"&gt;
          &lt;section class="entry-header"&gt;
            &lt;h2 class="entry-title"&gt;Heading Text&lt;/h2&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>I need to target just that one h2 element in order to change its color with css. I've tried doing the following.</p>
  
  <pre><code>#id123 h2 {
    color: red;
  }
  </code></pre>
  
  <p>It works, except every h2 on the page changes to red. I also can't just target h2 directly either as then it affects other pages as well. I can't seam to figure out how to target just that one specific h2 on that page only and not every one of them on the page.</p>
  
  <p>Further down the page I have some form fields that have h2 elements in them like this. I don't want these to change to red.</p>
  
  <pre><code>&lt;li id='field_18_75' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'&gt;
    &lt;h2 class='gsection_title'&gt;Title Text&lt;/h2&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The trouble is, all of this html is generated and I don't have any control over that. So I can't add a custom id to the element for example.</p>