CSS-селектор первого элемента inline-block

Question

Я ищу селектор CSS для первого (или не первого) элемента в строке.

На следующем изображении у меня 12 блоков, разделенных горизонтально серой линией, эта строка непоказано в первом элементе каждой строки, это ожидаемый результат.

Есть ли способ выбрать первый элемент каждой строки, используя CSS?

Мне подходит любой альтернативный способ сделать это с помощью CSS, даже flex, grid или float.

div{
    width: 100px;
    height: 70px;
    margin: 5px 0;
    padding: 5px;
    display: inline-block;
}
div:not(:first-child){
    border-left: 3px solid #999;
}

<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>
<div>This is a block</div>

Answer 1

Вы можете рассмотреть отрицательное поле слева, чтобы скрыть эту строку:

.wrapper > div {
  width: 100px;
  height: 70px;
  margin: 5px 0;
  padding: 5px;
  display: inline-block;
  border-left: 3px solid #999;
  margin-left: -3px;
  margin-right: 3px; /*to rectify the removed margin*/
}


/*hide the overflow on the parent element*/
.wrapper {
  overflow: hidden;
}

<div class="wrapper">
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
  <div>This is a block</div>
</div>

Answer 2

Этот вопрос немного сложен, потому что вы не можете выбрать целевой элемент, если не знаете порядок.Тем не менее, вы могли бы добиться небольшой хитрости с отрицательными полями и overflow: hidden свойством родительского элемента.Если это нормально, вы можете попробовать это:

.wrapper {
  overflow: hidden;
}

.inner-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: -3px;
}

.box {
  padding: 10px;
  border-left: 3px solid #999;
  flex: 0 0 70px;
  height: 100px;
}

<div class="wrapper">
  <div class="inner-wrap">
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
    <div class="box">random bash</div>
  </div>
</div>