Question

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.

Given this file (snippet below of this below) How do a select the very first h3 element. Unfortunately, deface works in isolation so there’s no surrounding elements to bind to, otherwise I could do something like .container h3:first-child and be done with it, it also means that something like h3:first-child doesn’t work, as this would select the first child of the h3 element.

Html snippet:

<h3><%= accurate_title %></h3>

<div data-hook="account_summary">
  <dl id="user-info">
    <dt><%= t(:email) %></dt>
    <dd><%= @user.email %> (<%= link_to t(:edit), spree.edit_account_path %>)</dd>
  </dl>
</div>

<div data-hook="account_my_orders">

  <h3><%= t(:my_orders) %></h3>
  <% if @orders.present? %>
    <table class="order-summary">

Any ideas or thoughts appreciated!
Thanks!

Answer 1

it also means that something like h3:first-child doesn’t work, as this would select the first child of the h3 element.

Wrong. It selects the h3 element if it’s the first child, not the first child of the h3 element.

Anyway, if deface treats h3 as one of three root elements as you seem to imply (which doesn’t really make sense to me), try this:

h3:root

Or if it actually takes your HTML snippet and places it within some anonymous root element, you could try using this:

:root > h3:first-child

The :root pseudo-class is fairly self-explanatory.