can I write a loop for css

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

<div> <div></div> <div></div> <div></div> <div></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?

5 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:

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.

You can do

div.containerLength > div { /* > Matches only first level children of the wrapper div */ float: left; }

div[id|="new"]{ float: left; }

You may or may not need the quotes, it's weird sometimes.

you can't write any logic at all in css. you can, however, managed css with JavaScript, or include multiple id's in one rule, or just use a class.

You also may be able to use Css attribute selectors, depending on how the ids are arranged and how broad you need your browser support to be.

Why don't you try this:

.containerLength > div {float:left}