WAIT: Query Loop CSS Specificity

[Corry]

Reproduce Behavior

1. Create a custom Color field using ACF/ACPT/Metabox plugin.

2. Create a query loop of containing an element that supports background colors.

3. Apply the dynamic data (on an # ID level) as the background color for the element within the query loop.
   

   

4. Apply a different background color on :hover for the same element.
   

   

5. Within the editor the element changes color on hover, however on the front end it does not.
   
   Refer to image above:
   The query loop’s dynamic data has a higher specificity which appears to override the :hover state’s color. It contains the [data-query-loop-index="1"] selector - which the hover does not.

Workaround
The only workaround we have found is to set the :hover color to RAW input and apply the color with the !important flag.

Expected Behavior
The background color set on the :hover state of the id should not be overwritten by the base ID value - (I would assume both would need the query loop’s data-query-loop-index applied).

Additional Info

• This is a mobile first website with base breakpoint at 320px.

@SeanNAB FIY

[timmse]

Hi Corry,
Thanks so much for your report!

The behavior is understandable because you are mixing dynamic data (background color per button) and static data (hover color for all buttons). The dynamic color must have some reference to the corresponding post - and this is controlled by the data-query-loop-index.

The hover style, on the other hand, does not need this index, as it should apply across the board to all buttons - so it would make no sense to repeat the same style for index 0-x. If the hover color were also dynamic, it would work.

The simplest solution at first glance is to enter the hover color in the RAW field and make it more specific with !important. Then it also works.

Perhaps I will come up with a better/more generally valid solution later.

Best,
timmse