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

How can you dynamically disable the submit button on a form in Angular 7+ based on the form's current status?

Tips for retrieving the file name from the <input type="file" tag within a JSP page

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Is there a way to access the rear camera on a mobile device using webcam.js?

The intended functionality of clicking on an image is exclusively reserved for its immediate parent element

Ways to adjust the brightness of any color when hovered over

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

Javascript animation functioning for a singular item within a list

Using the <video /> tag on a Next.JS page generated on the server side leads to hydration issues

Tips for activating this effect even when the window is resized during page scrolling

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

Unable to access Form element in Firefox browser

Storing data locally in PhoneGap using localStorage via AJAX calls is a common requirement for

"How can I adjust the positioning of a Materialize modal to be at the top

Is it achievable to have a background image cover size with a responsive rollover effect?

detect mouse click coordinates within an iframe that spans multiple domains

What is the best way to showcase a photo selected using an HTML input within a div container?

I want to display a div above an image when hovering over it

Update the styling of each div element within a designated list

Looking for assistance in identifying the cause of CSS malfunction in Internet Explorer