Упростить дерево стилей css

140

25 июля 2019, 23:10

Как можно упростить стили (паддинг можно применять только к a):

.admin-division-menu > ul > li a.admindivisionmenu-without-clild {padding-left: 20px;} 
 
.admin-division-menu > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 30px;} 
.admin-division-menu > ul > li > ul > li .admindivisionmenu-child {margin-left: 30px;} 
 
.admin-division-menu > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 50px;} 
.admin-division-menu > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 50px;} 
 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 70px;} 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 70px;} 
 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 90px;} 
.admin-division-menu > ul > li > ul > li > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 90px;}

Answer 1

Возможно не правильный ответ... Что, если использовать em для твоей проблемы?

em - изменения относительно размера шрифта элемента (2em означает 2-кратный размер текущего шрифта).

Полезная ссылка https://www.w3schools.com/cssref/css_units.asp

ul > li{ 
margin-left: 1.2em; 
padding-left: 1.2em; 
font-size: 1.2em; 
}

<ul> 
  <li> 
    lol 
    <ul> 
      <li> 
        lol 
        <ul> 
          <li> 
            lol 
            <ul> 
              <li> 
                lol 
              </li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>