What is the best way to choose all initial elements within a single row using CSS?

Question

What is the best way to choose all initial elements within a single row using CSS?

Is it possible to target all the first elements in a single row? I know this is an unusual request, but I have a row that contains block elements. I want to apply CSS styling to each of the first elements.

Here is the 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>

Here are the first elements for your reference, with a dynamic screen size.

html css element

Answer 1

Answer №1

Depending on the number of elements in each row, you can utilize the li:nth-child(4n+1) series to select the first element of each row if there are 4 elements in a row. If there are 3 elements in a row, 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>

Answer 2

Depending on the number of elements in each row, you can utilize the li:nth-child(4n+1) series to select the first element of each row if there are 4 elements in a row. If there are 3 elements in a row, 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>

What is the best way to choose all initial elements within a single row using CSS?

Answer №1

Similar questions

I'm trying to create a transparent v-card, but for some reason it's not turning out the way I want

The subfolder and HTML page have identical names and are not functioning properly

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Retrieve several values with a limit of 1 in SQL

Is it possible to include number padding in a Bootstrap number input field?

What is the best way to maximize the size of an image without causing the parent div to expand in height?

"Enhanced interactivity: Hover effects and selection states on an image map

Sticky positioning for dropdown menu in table column body

Tips on solving the Navigation bar burger problem with HTML and CSS

Can the information from a form be automatically submitted to the server upon selection?

Conceal the div element if the value exceeds 0

Embedding a table row within an anchor element in Angular 4

Is there a solution for the noticeable delay in loading fonts on a web page?

What is the best way to troubleshoot an unresponsive button element to determine the listeners it has?

Problem involving the h1 tag nested within a div container

What is the best way to conceal the border and background color of the dropdown arrow in an HTML <select> tag?

What is the reason behind the issue where max-height disrupts border-radius?

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

Is there a more intelligent approach to incorporating Bootstrap classes (or classes from another less.css file) into my less file through inheritance?

tips on encrypting css/js file names