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

  • I believe you would add a style to the rendering variant instead. May 26, 2018 at 10:36
  • Is there a way to know the index of item in rendering variant and based on that i can handle the styling?
    – NAli
    May 26, 2018 at 12:11
  • This is where the :nth-child() and the :nth-last-child() pseudo-classes come into play. May 26, 2018 at 15:41
  • But the design needed is more complex, we need a view like grid where each cell well display the opposite of the other for example the first cell will show image to the left and description to the right then the second cell will display description to the left and image to the right.is there a way to achieve this using rendering variant with search results?
    – NAli
    May 26, 2018 at 16:00
  • 1
    I would think css solves this, like @DawidRutkowski points out. stackoverflow.com/a/11781677/1277533 May 26, 2018 at 16:22

1 Answer 1


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.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.