By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Using selectors in custom CSS for menus

A

alaninsitges

New Member
Hi there Elementorinos,

I'm trying to add a vertical separator to a menu, so that it looks like this:

MENU ITEM A | MENU ITEM B | MENU ITEM C | MENU ITEM D

Adding a border to the right of each menu element is easy enough with CSS, but I've run into trouble when I want to specify different behavior for the last menu element, and thus not have the vertical line appear after it. It's not clear to me the context returned by the "selector" option in custom CSS. Which of these elements is it returning when I use it on a menu widget?

nav #menu-1-7cc041d li a.elementor-item span span.trp-ls-language-name

And further, once I know the context, how can I navigate through the DOM? I am supposing that the context returned above is the li, and therefore I should be able to do something like selector.parent.last-child a {} to style only the last item in a menu. But it doesn't seem to work (I'm aware that parent isn't valid, just using it as an example).

Can anyone shed some light on how to get the last child of a list of elements in custom CSS? Or is there an easier way to accomplish the separator that I'm not aware of?

Thanks very much.
 
elementor official
elementor official
Top