CODEWITHSUNDEEP
htmlcss
Amg
Amg

Reputation: 123

Repeat class multiple times without repeating code

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?

Upvotes: 0

Views: 2059

Answers (4)

Jordan Casey
Jordan Casey

Reputation: 1011

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

Upvotes: 2

Calvin Nunes
Calvin Nunes

Reputation: 6516

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

Upvotes: 2

Xhynk
Xhynk

Reputation: 13840

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.

Upvotes: 1

h0merr
h0merr

Reputation: 212

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.

Upvotes: 1

Related Questions