title: CSS select first child if it's a certain tag
body: <p>I need to select a particular element only if it occurs as the first child of a div. Is there a CSS selector that'll handle that case?</p>
  
  <p>For example, I want to select this figure:</p>
  
  <pre><code>&lt;div&gt;
      &lt;figure&gt;&lt;/figure&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I don't want to select this one:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;&lt;/p&gt;    
      &lt;figure&gt;&lt;/figure&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't change the HTML, so I can't add a class. I know about the <code>:first-child</code> and <code>:first-of-type</code> selectors, but they don't fit this case by themselves. How can I select the first child only if it's a figure?</p>