Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

can I write a loop for css

Tags:

css

I have a scenario where I am getting ID generated like this

<div class="containerLength">
<div id="new-1"></div>
<div id="new-2"></div>
<div id="new-3"></div>
<div id="new-4"></div>
</div>

and so on

is there a way I could write some css to target them through a loop? maybe something like

#new[i; for(i=0; i<="containerLength.length"; i++)]{
float:left;
}

Probably I am day dreaming correct?

like image 362
soum Avatar asked Jun 07 '13 15:06

soum


People also ask

How do you style a loop in CSS?

Create a SCSS file. Then press F1 and look for Live Sass: Watch Sass if you are using the live sass compiler extension. Click on it and it'll create a style. css file with all of the different font-sizes, growing one by one, for each paragraph.

Can you write loops in HTML?

Approach 1: Using the for loop: The HTML elements can be iterated by using the regular JavaScript for loop. The number of elements to be iterated can be found using the length property. The for loop has three parts, initialization, condition expression, and increment/decrement expression.

What is for loop in HTML?

The loop attribute is a boolean attribute. When present, it specifies that the audio will start over again, every time it is finished.


1 Answers

You can't do loops with pure CSS, however, if you're using something like SASS or LESS then you can do both like:

SASS:

@for $i from 1 through 4
  .#{$class-slug}-#{$i}
    width: 60px + $i

LESS:

Can you do a javascript for loop inside of LESS css?

However, assuming you just want to apply the same style to each nested div, you can just do

.containerLength > div{
  float: left;
}

or perhaps create a class named .float-left and apply it to each element you want floated right.

like image 92
Prisoner Avatar answered Nov 22 '22 03:11

Prisoner