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

There is no CSS-only way. I have added the JavaScript solution in your fiddle.

As a workaround, you can assign fixed percentage widths to list items, and use CSS media queries to increase/decrease the widths based on screen size. This way you will know exactly how many items fit on a line which in turn allow you to style specific elements. SASS could make writing repetitive CSS easier. Rough outline (open full page and resize the browser):

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  float: left;
  box-sizing: border-box;
  margin-bottom: .5em;
  border: thin solid #EEE;
  padding: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #CEF;
}
li:first-child {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
li:last-child {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
@media (min-width: 600px) and (max-width: 799px) {
  /* 4 items per row */
  li {
    width: 25%;
  }
  /* match 4, 8, 12, ...*/
  li:nth-child(4n+4) {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  /* match 5, 9, 13, ... */
  li:nth-child(4n+5) {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }
}
@media (max-width: 599px) {
  /* 3 items per row */
  li {
    width: 33.3333%;
  }
  /* match 3, 6, 9, ... */
  li:nth-child(3n+3) {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  /* match 4, 7, 10, ... */
  li:nth-child(3n+4) {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }
}

  
Praesent ultricies libero
  
Aenean in velit vel
  
Ut consequat odio
  
Integer convallis sapien
  
Fusce placerat augue
  
Vestibulum finibus nunc
  
Nulla consectetur mi
  
Ut sollicitudin metus
  
Maecenas quis nisl sit
  
Vivamus eleifend justo
  
Duis ut libero pharetra