Applying CSS on class with variable name

Question

I'm generating class name from server side like:

<p class="level_1">List item 1</p>
<p class="level_2">List item 2</p>
<p class="level_3">List item 3</p>
<p class="level_1">List item 1</p>
<p class="level_2">List item 2</p>
<p class="level_1">List item 1</p>

and I expect the output with indentation such that it looks like:

List item 1
   List item 2
      List item 3
List item 1
   List item 2
List item 1

The syntax for class name is like level_$i where $i is variable and it can go to any level (starting from 1 to n). So how can I apply CSS for indentation in this situation?

henser · Accepted Answer · 2014-09-15 09:00:12Z

1

You can't do for loops in pure CSS. Consider using LESS for that purpose. Here's a tutorial on LESS Loops

You can achieve this using jQuery ... see the jsFiddle example I prepared for you.

var i= 1,
    val= 0;

$('[class^=level_]').each(function(){

$('.level_' + i).css('padding-left',val+'px');
    i++;
    val += 20;
});

edited Sep 15, 2014 at 9:00

answered Sep 15, 2014 at 8:27

henser

3,3372 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chankey Pathak Over a year ago

Using less.js in the browser is great for development, but it's not recommended for production - Official docs

Chankey Pathak Over a year ago

If there's no solution in CSS for such situation, then suggest me in which way should I return the class name from server?

henser Over a year ago

Again ... that wouldn't be accomplished with CSS alone ... what server-side programming language are you using?

Chankey Pathak Over a year ago

Can it be done using jQuery such that it creates CSS when the DOM has loaded? I use Perl on server side.

henser Over a year ago

See edit ... posted an answer to your problem using jQuery ... let me know if this is what you intended to do ...

|

WhiteAngel · Accepted Answer · 2014-09-15 08:49:38Z

1

I can see 2 solutions:

You can generate CSS style automatically while you are generating list (using PHP)
You can use javascript/jquery to parse elements and create appropriate rules dynamically. Here's JSBin: http://jsbin.com/zaviqeyavico/1/edit

answered Sep 15, 2014 at 8:49

WhiteAngel

2,8463 gold badges24 silver badges36 bronze badges

1 Comment

Chankey Pathak Over a year ago

Thanks. I'll prefer jQuery :)

Collectives™ on Stack Overflow

Applying CSS on class with variable name

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related