1

comrades.

I need to show a list of few elements with unknown width and number of elements, there a separators between items also. It can be few rows, or can not to be.

I use a flexboxed <ul> with flex-wrap and make separators with <li> `s border-left. I need to hide separators of first item of each row if row was wrapped to few rows.

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
li {
  flex: 0 0 auto;
  border-left: 1px solid red;
}
li:first-child { /* here i need something like ul:flex-row li:first-child */
  border-left: none;
}
html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Does there exist the solution of this task with css?
Or only thing i can use is js, like offset().top changes of <li>s parsing and adding modifier-classname?

Thanks ahead.

Mike Polo
  • 103
  • 2
  • 7
  • CSS isn't a programming language, so there would be no way for it to determine the first `li` on a new row. You would have to create a new `ul` and target the first `li` of each `ul` instead of dynamically wrapping, or use JavaScript to determine the first `li` after the wrapping occurred. – Nick Apr 03 '19 at 10:45
  • Sure, css is not a programming language. But we still have `:first-child`, `:nth-child(n)`, and more other cool stuff. As long as a task is dynamically-wrapping of the list -- i can't use new `
      `.
    – Mike Polo Apr 03 '19 at 10:50
  • @MikePolo fair point, but keep in mind that `nth-child` type pseudo selectors are targetting DOM elements directly. I.e. if I target `nth-child`, the same element will be targeted regardless of any style rules that show or hide it. You can imagine it as if CSS rules target elements BEFORE any styles are actually applied to the document as a whole. There's no way to target an element based on it's response to a previous style. For example: I can't target all element with a red background - does that make sense/help? - also, have a look at: https://stackoverflow.com/q/42176419/6049581 Good luck! – Frits Apr 03 '19 at 10:54
  • 2
    Fair enough. So **js** is the only solution in this case, i guess. Thanks, Frits, and good luck to you too. – Mike Polo Apr 03 '19 at 11:06

0 Answers0