Selector for the first and last inline-block element on a new line

Question

I\'m trying to build a navigation with dynamic elements which may break onto two lines at small screen sizes, and I\'d like to be able to style the first and last elements on ea

Answer 1

Is it possible to get a selector for the first and last inline-block element that runs onto a new line or are there any other (non-javascript) approaches for this effect?

No, there are no such selectors. CSS provides no access to information about where lines break (with the limited exception of the :first-line pseudo-element). No, there are no other non-JavaScript approaches for this effect.

If you are willing to use JS, you can iterate over the elements whenever the layout might have changed, examine the position of each vis-a-vis its parent container, judge whether it's up against the left or right side, then apply your border radius.

Another possible JS solution is to perform your own line-breaking calculations by accumulating widths and figuring out where the break must be occurring.

You may want to examine libraries such as Masonry to see if they provide hooks allowing you to access the internal layout configuration, which could make this easier.