I can write a loop for css

Question

I have a script in which I get an identifier created this way

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

etc.

Is there a way to write some css to direct them through a loop? maybe something like

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

I guess I'm daydreaming right?

Answer 1

You cannot loop with pure CSS, however, if you use something like SASS or LESS, you can do this:

Sass

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

LESS

Can you make javascript loop inside LESS css?

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

 .containerLength > div{ float: left; } 

or perhaps create a class named .float-left and apply it to each element that you want to place on the right.

Answer 2

You can do

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

Answer 3

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

documentation

You may or may not need quotation marks, sometimes this is strange.

Answer 4

Why don't you try this:

 .containerLength > div {float:left} 

Answer 5

you cannot write any logic at all in css. however, you can control css using JavaScript or include multiple identifiers in a single rule or just use a class.

You can also use the Css attribute selector, depending on how the identifiers are organized and how wide your browser support is.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors