DEV Community

ivolkoff
ivolkoff

Posted on

CSS rendering .deliver in list

In the project I use a menu component with conditional rendering.
The problem happened in the display of menu item separators, because some entries may not be rendered.
Example 1 is the first state when all menu items are visible.
Example 2 and 3 are the state when some elements are not rendered in the component.

Image description

I wrote such a selector to hide the line elements.

<style>
  .deliver:has(+ .deliver),
  .deliver + .deliver:not(:has(+ *)) {
    display: none;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Code example https://codepen.io/ivolkoff/pen/ExpKBvg

Top comments (0)