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?
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.
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.
The loop attribute is a boolean attribute. When present, it specifies that the audio will start over again, every time it is finished.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With