Override CSS Class Not Working

Hi,

I am trying to override the CSS class for the hit widget - see code below. When I inspect the results, the new class is being applied but subordinate to the default class (ais-Hits-item).

How do I either remove the ais-Hits-item class or make it subordinate to my new class? I thought that was the point of the cssClasses object?

  instantsearch.widgets.hits({
    container: '#hits',
    cssClasses: {
      item: 'hit-item',
    },
    templates: {
    	item: `
				<img class="hit-thumbnail" src="//logo.clearbit.com/hubspot.com?size=80">
				<p class="hit-title-secondary">{{ Vendor }}</p>
				<h5 class="hit-title-primary">{{ Card Name }}</h5>
				<div class="hit-pricing-block">
					<h5 class="hit-price">{{ Pricing - Per User Per Month - Paid Yearly }}</h5>
					<p class="hit-price-label">per user per month</p>
				</div>
      `,
    	empty: "No results have been found for {{ query }}"
  	}
  }),

In which order are you loading both the saastack…css and algolia-min.css files? You need to load yours AFTER the algolia-min one.

Ugh. That might not be possible - I’m using Webflow. Not sure if it is possible to control when the CSS loads. I will look into it.

Any other workarounds come to mind?

Appreciate the help!

Hi @dom,

The alternative is to use a more specific selector if you can’t rely on the order. The more specific the selector is, the highest priority it has. You can find more information about that in Cascade and inheritance.

Note that it’s probably better to control the order and not rely on selector specificity. It’s more complicated to manage selectors with different levels of specificity rather than a single level e.g. BEM naming convention.

Hope that helps!

1 Like

Thank you both @samuel.vaillant & @sylvain.utard!

I ended up using more specific selectors, which works. Tedious and not ideal, but I can’t control CSS loading order with Webflow.

That’s what I get for using a website builder for the front end :sweat_smile: Webflow is great for certain things, but this is not the first limitation I’ve run into. Will likely have to move off Webflow at some point in the future.

Cheers,
Dom