How can I select all first elements in one row through CSS?

Question

How can I select all first elements in one row ? I understand that my question is strange. But I have the one row which containing block elements. I need write a CSS on every first element.

This's one row

<ul class="slides">
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

This's first elemets and screen with dynamic size

Answer 1

It's depend on Howmany elements in one row. In image 4 elements in one row so you can use li:nth-child(4n+1) series for select first elements of each row. If you have 3 elements in one row so you can use li:nth-child(3n+1).

 *,
*::before,
*::after {
    box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.slides {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}
li {
  flex: 0 0 25%;
  padding: 10px;
  max-width: 25%;
}
.box {
  width: 100%;
  height: 100px;
  background-color: red;
}
@media(min-width: 2px) and (max-width: 767px) {
  li:nth-child(2n+1) .box{
    background-color: green;
  }
}
@media(min-width: 768px) and (max-width: 1024px) {
  li:nth-child(3n+1) .box{
    background-color: green;
  }
}
@media(min-width: 1025px) {
  li:nth-child(4n+1) .box{
   background-color: green;
  }
}
@media(max-width: 1024px) {
  li {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}
@media(max-width: 767px) {
  li {
     flex: 0 0 50%;
     max-width: 50%;
  }
}     

<ul class="slides">
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
    <li>
      <div class="box"></div>
    </li>
  </ul>