How to Write a Loop for CSS

can I write a loop for css

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.

How to generate CSS with loop in less

All, I found a way to output css in loop. pleae review it .thanks.

@iterations: 100;

// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > 0) {

    // create the actual css selector, example will result in
    // .myclass_30, .myclass_28, .... , .myclass_1
    (~".span@{index}") {
        // your resulting css
        width: percentage((@index - 1) *0.01);
    }

    // next iteration
    .loopingClass(@index - 1);
}

// end the loop when index is 0
.loopingClass (0) {}

// "call" the loopingClass the first time with highest value
.loopingClass (@iterations);

Write CSS from jQuery within a for loop

Okay, so, a few things. Assuming that theElements is an array of HTML elements, the each is unnecessary. But that doesn't seem to be the case, since you say element22 is showing up (your code as its written would only create element0 over and over again if theElements was an array of HTML elements). So apparently theElements is an array of arrays, or an array of jQuery objects. Which is weird given its name, but let's power through.

As others have mentioned, you're overwriting the text every iteration, which is bad. Building a string is slightly better, but you're still doing repeated string concatenation, which is slow. If we had to do this, we should append to an array and then join it together at the end (which is faster, since appending to a string creates the entire string from scratch every time).

var css = [];
for (var i = 0; i < theElements.length; i++) {
    $(theElements[i]).not('.responsive-wrap').each(function(i) {
        var theWidth = $(this).width();
        $(this).addClass('element' + i);
        css.push('.element' + i + ' {max-width: ' + theWidth + 'px;}');
    });
}
$("#dynamicStylesheet").text(css.join('\n'));

Now, that works, and will do what you want. But this is almost definitely not the right way to do whatever it is you're trying to do. Dynamically building CSS on the client is not good, unless you're writing something like a CSS editor. There are much easier ways to solve whatever problem led you down this path.

If creating a client-side stylesheet is absolutely vital, then there are better ways to do this, too. Create a single CSS rule that applies to all the elements of the elements of theElements (wow, look at that sentence). That's not possible if they're chosen randomly, but if you arrived at them through some logical query you can use the same one in CSS.

As far as the [i] thing goes -- I don't know what to tell you. Due to the weird way JavaScript stringifies arrays, they're equivalent, and if i doesn't work for you then there's something very wrong. I would be using i.toString() if I were you, but i should work fine.

Edit

If theElements is an array of tag names, this can be simplified to:

var tagNames = theElements; // clear variable names are important!
var css = [];
$(tagNames.join(',')).not('.responsive-wrap').each(function(i) {
    var $this = $(this);
    $this.addClass('element' + i.toString());
    css.push('.element' + i.toString() + '{ max-width: ' + $this.width() + 'px; }');
});
$("#dynamicStylesheet").text(css.join('\n'));

How to create iterable loop in css selector

I assume there's an issue with your CSS selector.
You are trying to form it as '.v-table-table > tbody > tr:nth-child(i) > td:nth-child(4) > div > div > a', but in this notation, the i variable does not get substituted to it's value.

Try using an f-string:

selector = f".v-table-table > tbody > tr:nth-child({i}) > td:nth-child(4) > div > div > a"

Note the curly braces around i - it's literally "place the value of the i variable here"

how to use foreach loop with css

Just change the placement of loop. You can do it as following:

<div class="row">
  @foreach ($data as $key => $jobs)
  <div class="col-sm-3">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">{{$jobs->tilte}}</h5>
        <p class="card-text">{{$jobs->final_sub}}</p>
        <a href="#" class="btn btn-primary">Apply</a>
      </div>
    </div>
   </div>   
  @endforeach
</div>
    

Loop with vars in CSS

You can set the rules once and then only update the css var() value for each selector :(

possible example

cloud-intro__image img {
--delay: .1s; /* default value */
  -webkit-animation-delay: var(--delay);
  animation-delay: var(--delay)
}

.cloud-intro__image:nth-child(2) img {
 --delay:.2s
}

.cloud-intro__image:nth-child(3) img {
  --delay: .3s
}

.cloud-intro__image:nth-child(4) img {
 --delay: .4s
}

.cloud-intro__image:nth-child(5) img {
 --delay: .5s
}

.cloud-intro__image:nth-child(6) img {
 --delay: .6s
}

.cloud-intro__image:nth-child(7) img {
  --delay: .7s
}

.cloud-intro__image:nth-child(8) img {
  --delay:.8s
}

Using CSS :nth-child to create loop with 5 different designs repeated every 5 items

The problem is how you're defining the formula. The formula in the nth-child selector goes as follows:

nth-child(an+b)

Where a is the size of your cycle (in your case, 5), and b is the offset value (or modulo).

Here's a working snippet:

.collection-list:nth-child(5n+0) .collection-item {background-color: red;}.collection-list:nth-child(5n+1) .collection-item {background-color: blue;}.collection-list:nth-child(5n+2) .collection-item {background-color: green;}.collection-list:nth-child(5n+3) .collection-item {background-color: yellow;}.collection-list:nth-child(5n+4) .collection-item {background-color: purple;}

<div class="collection-list"><div class="collection-item">1</div></div><div class="collection-list"><div class="collection-item">2</div></div><div class="collection-list"><div class="collection-item">3</div></div><div class="collection-list"><div class="collection-item">4</div></div><div class="collection-list"><div class="collection-item">5</div></div><div class="collection-list"><div class="collection-item">6</div></div><div class="collection-list"><div class="collection-item">7</div></div><div class="collection-list"><div class="collection-item">8</div></div><div class="collection-list"><div class="collection-item">9</div></div><div class="collection-list"><div class="collection-item">10</div></div>

---

Related Topics