Selecting an element before a linebreak

Question

I have a navigation bar with the following structure

    nav {
        text-align: center;
    }
    nav > ul {
        list-style: none;
        padding: 0;
        margin: 8px auto;
    }
    nav > ul > li {
        display: inline-block;
        padding: 10px;
        width: 200px;
        text-align: center;
        box-sizing: border-box;
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
    nav a {
        font-size: 130%;
    }

<nav>
    <ul>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
        ...
    </ul>
</nav>

The li:last-child block is useful to improve its look. But when the nav bar folds (like on a phone screen or a small browser window), I'd like to get rid of those borders before the line break. Is there a plain CSS way to do this? If not, how could I detect this in JavaScript?

I've looked at the MDN Selector list and it doesn't look like there is a pseudo-class selector that tailors to this need, and I imagine that a set of media queries for different breakpoints would allow me to calculate when to remove a given block's border, but this feels very hackish. Am I missing something closer to HTML that handles this issue?

Perhaps you could use the css media to create different formatting for smaller screens which cause wrapping, but without that border you don't want when that happens. — , Aug 14 '20 at 02:15
Does this answer your question? [CSS: Last element on line](https://stackoverflow.com/questions/9847663/css-last-element-on-line). As you've clarified your requirements to more than just the single-column on mobile screens, there isn't really a clean non-hacky way to do this without media queries. This question has some JS ways you can do it instead. — FluffyKitten, Aug 14 '20 at 02:39

FluffyKitten · Answer 1 · 2020-08-14T02:43:45.220

When you say "when the nav bar folds", I presume you mean when it is displayed in a single column.

If that case you can use media queries to apply different CSS when the screen reaches a certain size, e.g. don't include the borders by default, and then when the screen reaches 400px (or whatever size works depending on the padding & margins of any containers in your real site), add the border with this code:

@media only screen and (min-width:400px){    
     nav > ul > li {
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
}

Working Snippet (You need to view it in full screen and resize your browser to see it working):

nav {
        text-align: center;
    }
    nav > ul {
        list-style: none;
        padding: 0;
        margin: 8px auto;
    }
    nav > ul > li {
        display: inline-block;
        padding: 10px;
        width: 200px;
        text-align: center;
        box-sizing: border-box;
    }
    nav a {
        font-size: 130%;
    }
@media only screen and (min-width:400px){    
     nav > ul > li {
        border-right: 1px solid;
    }
    nav > ul > li:last-child {
        border-right: 0px none;
    }
}

<nav>
    <ul>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
        <li><a href="url">link one</a>
        <li><a href="secondurl">link two</a>
    </ul>
</nav>

UPDATE: Based on your edits & comments, there isn't a clean HTML & CSS-only way to do this without media queries. I've linked to a question above that has some JS alternatives that might work if you really don't want to do it this way.

This is the kind of solution I was trying to avoid. It handles the single-column case wonderfully, but what about a double-column case or folding on three columns or... you can see how this proceeds ad infinitum, especially if I might add new columns in the future. — Holden Rohrer, Aug 14 '20 at 02:18
You didn't ask about those scenarios in your question, you only asked about mobile screens! If that's what you need, and you need it to work with the HTML you have, you will need to add multiple media queries. Otherwise you could change the nav structure altogether to use something other than lists. But as that wasn't your question, we can only work within the parameters you give us :) — FluffyKitten, Aug 14 '20 at 02:22
I said "like a mobile screen." I'm not talking exclusively about mobile screens. But nonetheless, I am not glued down to the HTML or the CSS. Is there a change in the HTML that you have in mind? — Holden Rohrer, Aug 14 '20 at 02:25
@HoldenRohrer I was thinking columns but you need the items to go across and wrap, rather than down and wrap. There really is no non-hacky pure HTML & CSS way to do this without media queries (there is a way to do it using negative margins and try to hide the right-most border, but that's very hacky IMO), you would need to use JS. — FluffyKitten, Aug 14 '20 at 02:37

Selecting an element before a linebreak

1 Answers1