title: Spree themeing with Deface: What css selector will select the first h3 from this code?
body: <p>I'm trying to theme a Spree site using deface. Deface uses css selectors to select elements and then modify them, so in theory if you've only got experience with css2/3 and have any ideas then please leave an answer below.</p>
  
  <p>Given <a href="https://github.com/spree/spree/blob/master/auth/app/views/spree/users/show.html.erb#L1" rel="nofollow">this file</a> (snippet below of this below) How do a select the very first <code>h3</code> element. Unfortunately, deface works in isolation so there's no surrounding elements to bind to, otherwise I could do something like <code>.container h3:first-child</code> and be done with it, it also means that something like <code>h3:first-child</code> doesn't work, as this would select the first child of the h3 element.</p>
  
  <p>Html snippet:</p>
  
  <pre><code>&lt;h3&gt;&lt;%= accurate_title %&gt;&lt;/h3&gt;
  
  &lt;div data-hook="account_summary"&gt;
    &lt;dl id="user-info"&gt;
      &lt;dt&gt;&lt;%= t(:email) %&gt;&lt;/dt&gt;
      &lt;dd&gt;&lt;%= @user.email %&gt; (&lt;%= link_to t(:edit), spree.edit_account_path %&gt;)&lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  
  &lt;div data-hook="account_my_orders"&gt;
  
    &lt;h3&gt;&lt;%= t(:my_orders) %&gt;&lt;/h3&gt;
    &lt;% if @orders.present? %&gt;
      &lt;table class="order-summary"&gt;
  </code></pre>
  
  <p>Any ideas or thoughts appreciated!
  Thanks!</p>