Apply a class to every group of x elements

In order to style the products displayed on a product list page, I have an unknown amount of divs, with each row containing 4 divs for individual products. My goal is to apply a specific CSS class to the first div in each row, then another class to the second div, and so on. While I believe this can be accomplished using CSS and potentially jQuery, I am unsure where to begin my search.

The expected outcome should resemble the following:

<div> //row1
  <div id="1" class="grid1"> Product 1 </div>
  <div id="2" class="grid2"> Product 2 </div>
  <div id="3" class="grid3"> Product 3 </div>
  <div id="4" class="grid4"> Product 4 </div>
</div>
<div> //row 2
  <div id="5" class="grid1"> Product 5 </div>
  <div id="6" class="grid2"> Product 6 </div>
  <div id="7" class="grid3"> Product 7 </div>
  <div id="8" class="grid4"> Product 8 </div>
</div>
...

Any guidance towards a solution would be greatly appreciated.

Answer №1

You have the option to achieve this using just CSS without needing any classes:

div > div:nth-child(1) { ... }
div > div:nth-child(2) { ... }
div > div:nth-child(3) { ... }
div > div:nth-child(4) { ... }

If you prefer a jQuery approach, consider this code snippet assuming your row divs are assigned the class="row":

$('div.row > div').each(function() {
    $(this).addClass('grid' + ($(this).index() + 1));
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The color of hyperlinks in firefox varies based on the specific URL being visited

I am a beginner in the world of html and css. I have two links placed consecutively. In my css file, I have defined classes for a:link and a:hover. However, I noticed that the second link is displaying a purple color instead of silver. Both links correctly ...

Tips for Eliminating Unnecessary Space Above the Navigation Bar

I have a problem with the top navbar on my test site. There is some extra space above it that I want to remove so that the navigation extends all the way up to cover the viewport. Here is an image of what I'm trying to achieve: https://i.stack.imgur.c ...

Understanding the behavior of CSS float (even after thorough examination of W3C documentation)

I am currently facing an issue related to the float property and have provided a snippet of code below for reference. My goal is to achieve a two-column layout using floats. While I am familiar with other methods to achieve this layout, I am specifically i ...

The scroll bar remains hidden even though there are additional elements waiting to be displayed

I am currently utilizing asp.net along with entity framework 4 On my page, I have three tabs structured like this: The Challenge I'm Facing The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 ro ...

JavaScript alert box

I'm fairly new to the world of web development, with knowledge in CSS & HTML and currently learning TypeScript. I'm attempting to create a message icon that opens and closes a notifications bar. Here's where I'm at so far: document.getE ...

How can I maintain consistent spacing between two areas in CSS3 across all screen sizes?

My question pertains to the alignment of an advertisement (on the left as a banner) and content sections on my website. I have noticed that as the screen size increases, the distance between these two areas also increases. How can I ensure that the distanc ...

"Trying to access jQuery .slide and .slideUp features, but unfortunately they are

I've created this script: $("#comments .comment .links").hide(); $("#comments .comment").hover( function() { $(".links", this).stop(true).slideDown(300); }, function() { $(".links", this).stop(true).slideUp(300); } ); However, I'm facin ...

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

What could be causing my modal to not animate from the center of the screen?

I am aiming to have my .modal div class smoothly scale from 0 to 1 right in the center of the screen instead of starting at the bottom right and then moving to the center before settling in its final position. I have checked various resources like MDN docu ...

Ace code editor: A guide to implementing hover error messages

Using an Ace editor, I want to enhance my website by highlighting specific code ranges and displaying error messages when they are hovered over, just like in the example image. I'm curious if this functionality can be achieved through the Ace editor ...

Enhance the appearance of a button in Rails by incorporating custom styles or images

I am currently working with Rails and I am curious if there are any simple ways to enhance the appearance of the button_to control. Is it possible to style the <%= submit_tag 'Log in' %> or <%= button_to "Show Me", {:controller => ...

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

The usage of uppercase letters in HTML attributes

I'm struggling to get animation working on my chart. I have been using jQuery's append function to add an animation tag to my HTML page, but for some reason the animation isn't displaying properly. The issue seems to be related to the capita ...

Can you explain the significance of 'height: 0;' in CSS coding?

I've recently come across some outdated CSS code that sets the height to height: 0; in multiple places. I'm curious about what this 0 signifies and what unit it is measured in. If anyone could provide some insight, I would greatly appreciate it. ...

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

What is the method to execute jQuery code after the completion of a fade out effect?

I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...

What's the best way to make sure my table fits perfectly within its container's width?

I've encountered an issue with a table: If you want to see how the table was created, check it out on jsFiddle I attempted to modify the CSS like this : table{ width:100%; } td span { float:right; width:20%; text-align:center ...

Utilize Material icons in CSS for a list in Angular 9

My task involves altering the HTML provided by a content management system for one of our applications. Specifically, I need to replace all "ul"s with <mat-icon>check_circle_outline</mat-icon> instead of the default "." The challenge lies in t ...