Repeat class multiple times without repeating code

Question

I would like to repeat div class several times without having to code it, and being able to target each element individually with css. Possible?

Like instead of:

<div 
class="design">design</div>
<div 
class="design1">design</div>
<div 
class="design2">design</div>
<div 
class="design3">design</div>

I would have:

<div 
class="design">design</div> 
X4

Is it better to use span class and is this possible to multiply too?

If each of these designX classes is unique you should use an id instead. id="design1" — IDs are meant to be unique, while the whole point of class is that many things can be of the same class. Also, it might make sense to use both: <div class="design" id="d1">...</div> — Stephen P
– Stephen P, Commented Jan 8, 2020 at 21:11

Calvin Nunes · Accepted Answer · 2020-01-08 21:02:05Z

2

If I understood correctly what you want, then I think you can use nth-of-type(n). Although you'll need to repeat code in CSS... (you can avoid repeat HTML code by using Javascript, but since you didn't tagged it and not mentioned nothing about it, I think you want something in HTML and CSS only)

"The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings."

.design:nth-of-type(1){
  color: purple
}

.design:nth-of-type(2){
  color: blue
}

.design:nth-of-type(3){
  color: red
}

.design:nth-of-type(4){
  color: green
}

<div class="design">design</div>
<div class="design">design</div>
<div class="design">design</div>
<div class="design">design</div>

And about span, it depends on what you are going to do, div is naturally display:block, while span is display:inline

further read about nth-of-type: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

edited Jan 8, 2020 at 21:02

answered Jan 8, 2020 at 20:39

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amg Over a year ago

Thanks for your post. But it's not possible to do without actually repeating the div class 4 times?

Calvin Nunes Over a year ago

Is that what you need? Does this helps you? If yes, consider to upvote/accept

Jordan Casey · Accepted Answer · 2020-01-08 21:24:57Z

2

You could use javascript to accomplish this if you put it in a container.

<div id="div_container"></div>

<script>
    let output = "";
    for(i = 0; i<4; i++){
        output += "<div class='design'>design</div>"
    }
    document.getElementById('div_container').innerHTML = output;

</script>

You can further style it using .design:nth-of-type(1) .design:nth-of-type(2) etc.

This wouldn't make sense for 4 instances of the div, but more than 10 would be easier and scales to large numbers, simply change 'i' and create the div container.

EDIT: Define output prior to loop

edited Jan 8, 2020 at 21:24

answered Jan 8, 2020 at 21:00

Jordan Casey

1,1211 gold badge10 silver badges17 bronze badges

2 Comments

Xhynk Over a year ago

@CalvinNunes - Sure, OP didn't mention specifically using JavaScript, but this is a valid answer because it's implied that he needs assistance with programatically creating/incrementing divs, RE: I would like to repeat div class several times without having to code it …

Jordan Casey Over a year ago

True, but OP doesn't mention anything about frameworks either which could be a fair argument. If OP explicitly said that they didn't want any other tools than HTML, I wouldn't recommend this solution. You wouldn't use a drill to cut a plank. I'm offering OP a Saw instead.

Community · Accepted Answer · 2020-06-20 09:12:55Z

In order to output your HTML without rewriting it each time, you will need to use one of the following:

An actual programming language (Such as PHP)
A framework/library (such as React)
A preprocessor/templating system (such as Haml or Pug)

Using PHP is simple enough, if you have PHP installed on your webhost (you almost certainly do).

For instance, instead of this:

index.html:

<div class="design design-0">Design</div>
<div class="design design-1">Design</div>
<div class="design design-2">Design</div>
<div class="design design-3">Design</div>

You could have this:

index.php

<?php for( $i = 0; $i < 4; $i++ ){
    echo "<div class='design design-$i'>Design</div>";
} ?>

Or check out this Pug example: https://codepen.io/xhynk/pen/OJPvPMX if you would rather use a preprocessor.

For the CSS though, as @Calvin Nunes said, you can make use of the :nth-of-type() selector or even the Adjacent Sibling Combinator - though these largely make the need for the design-x type classes unnecessary, unless you have other reasons to include them.

h0merr · Accepted Answer · 2020-01-08 20:48:23Z

1

If i understood correctly, I'll keep the record from the post upstairs, and no, you can't do it without making it repeat 4 times, each div or the group of divs in this case NEEDS something for you to work with 'em.

answered Jan 8, 2020 at 20:48

h0merr

2122 silver badges10 bronze badges

Collectives™ on Stack Overflow

Repeat class multiple times without repeating code

4 Answers 4

2 Comments

2 Comments

index.html:

index.php

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

index.html:

index.php

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related