Question:

SXA Search Results Styling

Sitecore

Rylee: 2 weeks ago

In SXA 1.7, is it possible to add style on "li" tag from rendering variant? as i think the li tag is added in javascript "component-search-results?"

Answer:
Aaliyah: 2 weeks ago

Whatever the complexity is, SXA can handle it will. Follow these steps:

  1. Create your markup and write styles for it. (a fully complete HTML)
  2. Create a rendering variant for search result.
  3. Customise your rendering variant based on your containers and markup.
  4. The listing should be based on "ul" and "li" and your item styles should be independent of "ul" and "li"

That's it.

The list already has classes on items for start and end etc. You can style based on it. If not you can use the pseudo selectors of css for it.

Check the link for nth child and pseudo selectors reference on w3schools which is very basic.

https://www.w3schools.com/cssref/sel_nth-child.asp

P.s if you are good at using css flex you can also take benefits from it