can I write a loop for css

Question

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?

With plain vanilla CSS no. Why not assign a class to those elements instead? You could however try `div.containerLength > div {...}` — j08691, Jun 07 '13 at 15:27
Maybe a duplicate of http://stackoverflow.com/questions/4914533/do-css-functions-exist ? — Alan Piralla, Jun 07 '13 at 15:27
`div.containerLength div[id^="new"] { float: left; }`? What is it you're trying to do to these elements, once found/'looped'? — David Thomas, Jun 07 '13 at 15:27
You can possibly achieve most of your needs by changing your style and using some relatively new selectors like 'nth-child()' — Alan Piralla, Jun 07 '13 at 15:29
CSS is not procedural. You can target .containerLength > div {float:left;}, but there is nothing as a loop there — vals, Jun 07 '13 at 15:29
Thinking about looping CSS is fundamentally misunderstanding how CSS works. — Spudley, Jun 07 '13 at 15:39
You shouldnt even want to do this. Separate presentation from logic. — Alex Gill, Jun 07 '13 at 16:17
@Alex It sounds like the OP doesn't have a choice, the markup is dynamically generated. — cimmanon, Jun 07 '13 at 17:09

score 14 · Accepted Answer · edited May 23 '17 at 10:27

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.

score 3 · Answer 2 · answered Jun 07 '13 at 15:27

3

You can do

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

answered Jun 07 '13 at 15:27

karthikr

You don't really need the initial 'div', '.containerLength > div' is enough. – Marco Luglio Jun 07 '13 at 15:31
@facildelembrar I normally like keeping things more explicit. I agree that it is not required. – karthikr Jun 07 '13 at 15:32
2

With CSS, it's better to be too specific than not specific enough. Only select exactly what you want to change, and nothing more. I can't tell you how many work hours I've spent fixing bad CSS selectors. – Jun 07 '13 at 15:36
1

I used to agree with you guys and use a tag selector along with a class selector. What made me change my mind was performance, and to a lesser extent, file size. Check your pages with yslow and pagespeed. – Marco Luglio Jun 11 '13 at 09:28

score 2 · Answer 3 · answered Jun 07 '13 at 15:28

2

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

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

answered Jun 07 '13 at 15:28

score 1 · Answer 4 · answered Jun 07 '13 at 15:27

1

Why don't you try this:

.containerLength > div {float:left}

answered Jun 07 '13 at 15:27

Alexandru R

score 1 · Answer 5 · answered Jun 07 '13 at 15:31

1

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.

answered Jun 07 '13 at 15:31

DougM

Thanks guys. This was really great. Thaks for all your help – soum Jun 07 '13 at 15:40

5 Answers5