Spree themeing avec Deface : Quel sélecteur css sélectionnera le premier h3 de ce code ?

Question

J'essaie de thématiser un site Spree en utilisant Deface. Deface utilise des sélecteurs css pour sélectionner des éléments et les modifier. En théorie, si vous n'avez que de l'expérience en css2/3 et que vous avez des idées, veuillez laisser une réponse ci-dessous.

Étant donné que ce fichier (extrait ci-dessous de cet extrait) Comment sélectionner la toute première h3 élément. Malheureusement, deface fonctionne de manière isolée et il n'y a pas d'éléments environnants auxquels se lier, sinon je pourrais faire quelque chose comme .container h3:first-child et d'en finir avec elle, cela signifie également que quelque chose comme h3:first-child ne fonctionne pas, car cela sélectionnerait le premier enfant de l'élément h3.

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">

Toute idée ou réflexion est appréciée ! Merci !

Answer 1

cela signifie également que quelque chose comme h3:first-child ne fonctionne pas, car cela sélectionnerait le premier enfant de l'élément h3.

C'est faux. Il sélectionne le site h3 élément si c'est le premier enfant pas le premier enfant de le site h3 élément .

Quoi qu'il en soit, si la dégradation des friandises h3 comme l'un des trois éléments de la racine comme vous semblez l'impliquer (ce qui n'a pas vraiment de sens pour moi), essayez ceci :

h3:root

Ou s'il prend votre extrait HTML et le place dans un élément racine anonyme, vous pouvez essayer d'utiliser ceci :

:root > h3:first-child

En :root pseudo-classe est assez explicite.