CSS Flexbox - Select Every Item which is at the beginning of a newline (Wrap)

Question

is there something like a wrap-line selector in css?

Im using CSS-Flexbox for a layout with the wrap option.

I do not know how many lines I have beforehand but at every newline (every wrap) the pseudo selector "before" should NOT insert content. Else it should insert some content.

Here is an example of the problem im facing: Just copy this code into JS-Fiddle:

.items {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 400px;
}

.item {
  position: relative;
  padding: 0.25rem 0.5rem;
  display: block;
  border: 1px solid red;
}

.item:first-of-type:before {
  content: '';
}

.item:before {
  content: '\01F354';
}

<div class="items">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
  <div class="item">
    item A
  </div>
  <div class="item">
    item B
  </div>
  <div class="item">
    item C
  </div>
  <div class="item">
    item D
  </div>
</div>

My aim is that in the second line for the first item should not be a burger icon.

https://stackoverflow.com/questions/28371650/css-flex-last-and-first-item-in-a-row-selector, https://stackoverflow.com/questions/28580851/which-css-selector-can-be-used-to-select-a-flex-box-item-in-wrapped-state — misorude, Oct 19 '18 at 07:04
No css doesn't have what you mean, it can't detect a new line like so. Need javascript, or modify html a bit, like manually setting wrapping divs with a certain width. Unless number of items for each line is always the same and they're static, then you can use :nth-of-type(); — , Oct 19 '18 at 08:00

score -2 · Answer 1 · answered Oct 19 '18 at 06:53

this maybe helpful

you can set width for items and

use :nth-child() selector and set item flex-basis:

but it is better for you to use JavaScript or from server side

add title class on items to hide icons

.items {
  background-color: yellow;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 400px;
}

.item {
  position: relative;
  padding: 0.25rem 0.5rem;
  display: block;
  border: 1px solid red;
  flex-basis:75px;
}

.item:first-of-type:before {
  content: '';
}

.item:before {
  content: '\01F354';
}

.item:nth-child(4n+1):before {
  content: '';
}

<div class="items">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
  <div class="item">
    item A
  </div>
  <div class="item">
    item B
  </div>
  <div class="item">
    item C
  </div>
  <div class="item">
    item D
  </div>
</div>

CSS Flexbox - Select Every Item which is at the beginning of a newline (Wrap)

1 Answers1