There is a div with nested div .

The markup is as follows:

 <div class="found-item"> <a href=""> <div class="user-name clearfix"> <div class="pull-left"> <div>Руководитель группы веб-разработки</div> </div> </div> </a> <div class="user-group"> <span class="icons icon-group"></span> <a href="">Управление информационных технологий</a> </div> <div class="user-group user-group-inserted"> <span class="icons icon-group"></span> <a href="">Группа веб-разработки</a> </div> <div class="user-group user-group-inserted-1"> <span class="icons icon-group"></span> <a href="">Группа веб-разработки</a> </div> </div>

Every nested div should increase padding by 10px.

Styles:

 .found-item { background: #fff; margin: 5px; padding: 5px 0; border-bottom: 1px solid #b6b6ba; } .found-item .user-group { padding: 0 20px; } .found-item .user-group-inserted { padding-left: 30px; } .found-item .user-group-inserted-1 { padding-left: 40px; }

Now for each subsequent div separate class is set. Perhaps how to implement this without adding a separate class? Is there a solution using css or is js needed here?

Full code

It should look like this:

enter image description here

  • 3
    it would be more correct to change the markup by making each next block nested (on the principle of a multilevel list). by semantics it would be more accurate too. and then the general rule of indenting them would shift by an equal number of pixels from the parent - lexxl
  • a nested list would be more appropriate here - Grundy

3 answers 3

Good day. Try this:

 .found-item > div{ padding:... }

You can read more on the link here.

Selector 1> Selector 2 {Description of style rules}

The style is applied to Selector 2, but only if it is a child of Selector 1.

Edit: Yes, I'm sorry, I messed up a bit. If you need to get away from the classes for the list you just provided (that is, from the three elements), then as an option:

  .found-item { background: #fff; margin: 5px; padding: 5px 0; border-bottom: 1px solid #b6b6ba; } .found-item > div{ padding-left: 10px; } .found-item div + div{ padding-left:20px; } .found-item div + div + div{ padding-left:30px; }

and if the list will be formed dynamically and the number of elements will be changeable, then yes it will be necessary to use js or the means of the language in which the site is written.

  • This option is not suitable, because .found-item contains many .found-item . in this case padding will be added to all divs the same. and it is necessary that for each subsequent padding increased. I hope I explain it clearly) - Marina Voronova
  • Thanks, I did it for now. although I agree that the markup should be changed - Marina Voronova

can try with jquery:

 var x = $( ".user-group" ).toArray(); var pad=0; for(var i=0; i<x.length;i++){ $(x[i]).css("padding-left", (pad+10)+"px"); pad +=10; }

jsfiddle

@Grundy is possible and only .css just less obvious:

 $( ".user-group").css("padding-left", function( index, value ) { return (index+1) * 10; });
  • toArray is not needed and the loop is not needed and the variable is not needed, one css function call will suffice - Grundy
  • there the object is optional; you can also use two parameters - the name of the property and the function. And, in fact, much more clearly than a loop with a foreign variable and the constant creation of the jQuery object. - Grundy
  • one
    @Grundy Probably I won’t argue .. - C.Raf.T

Another option is the use of preprocessors less , sass

Feeddle

 <div class="b"> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> <div class="b__item">text</div> </div> .b { background: #fff; margin: 5px; padding: 5px 0; border-bottom: 1px solid #b6b6ba; } .b__item { padding-left: 10px; padding-right: 10px; } $div: 100; /* количество блоков */ @for $i from 1 through $div { .b__item:nth-of-type(#{$i}) { padding-left: $i * 10px; } }
  • this is if you know the number of divs you can, rather than knowing - by generating a deliberately large number, you can either miss and not guess and the number will be larger, or will generate a bunch of styles, most of which will just take up space - Grundy
  • one
    I did not think about it. All the same, the most correct option is to change the html structure by making each next block nested, as suggested by @lexxl. - soledar10