title: Select specific element before other element
body: <p>I have following HTML structure:</p>
  
  <pre><code>&lt;div&gt;
    &lt;h2&gt;Candy jelly-o jelly beans gummies lollipop&lt;/h2&gt;
    &lt;p&gt;
      Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake.
    &lt;/p&gt;
    &lt;p&gt;
      Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee  chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu. 
    &lt;/p&gt;
    &lt;h2&gt;Dessert pie cake&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;liquorice&lt;/li&gt;
      &lt;li&gt;powder&lt;/li&gt;
      &lt;li&gt;dessert&lt;/li&gt;
    &lt;/ul&gt;
    &lt;h2&gt;Chupa chups sweet dragée&lt;/h2&gt;
    &lt;p&gt;
      Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee.
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to choose only that <code>h2</code> which is directly before <code>ul</code>. How can I do this? In my content there are many more <code>uls</code> and many more <code>h2s</code> so the solution should be universal.</p>