Нумерованый список и под список

194

19 марта 2018, 23:34

Есть нумерованный список который начинается с "1". Нужно сделать так чтобы под список начинался с цифры- с которой начинается родительский элемент.

Возможно ли сделать такое средствами css без js?

.list { 
    color: $color-primary; 
    font-weight: 600; 
 
    & > li { 
        &:before { 
            margin-right: 1.2rem; 
        } 
 
        ul { 
            color: $color-minor-dark; 
 
            li { 
                &:before { 
                    margin-right: 1.2rem; 
                } 
            } 
        } 
    } 
 
    &.numeration { 
        counter-reset: list decimal; 
 
        & > li { 
            list-style-type: none; 
 
            &:before { 
                counter-increment: list; 
                content: counter(list) "."; 
                color: $color-active; 
            } 
 
            ul { 
                counter-reset: list decimal; 
 
                & > li { 
                    &:before { 
                        counter-increment: lists; 
                        content: counter(lists) "." counter(decimal); 
                    } 
                } 
            } 
        } 
    } 
 
    &.sm { 
        font-size: 1.4rem; 
 
        & > li { 
            & + li { 
                margin-top: 1.2rem; 
            } 
 
            ul { 
                margin-top: 1.2rem; 
                margin-left: 1.6rem; 
 
                & > li { 
                    margin-top: 1.2rem; 
                    padding-left: 1.2rem; 
                } 
            } 
        } 
    } 
 
    &.md { 
        font-size: 1.6rem; 
 
        & > li { 
            & + li { 
                margin-top: 1.4rem; 
            } 
 
            ul { 
                margin-top: 1.4rem; 
                margin-left: 1.6rem; 
 
                & > li { 
                    margin-top: 1.4rem; 
                    padding-left: 1.2rem; 
                } 
            } 
        } 
    } 
}

<ul class="list numeration md"> 
  <li>work status</li> 
  <li>annual income</li> 
  <li>net worth 
      <ul> 
          <li>forex market</li> 
      </ul> 
  </li> 
  <li>position 5</li> 
</ul>

Answer 1

ol { 
/* убираем стандартную нумерацию */ 
list-style: none;  
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */  
counter-reset: li;  
} 
li:before { 
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ 
counter-increment: li;  
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ 
content: counters(li,".") ". ";  
}

<ol> 
  <li>пункт</li> <!-1.-> 
  <li>пункт            
    <ol> 
      <li>пункт</li> <!-2.1.-> 
      <li>пункт</li> <!-2.2.-> 
      <li>пункт 
        <ol> 
          <li>пункт</li> <!-2.3.1.-> 
          <li>пункт</li> <!-2.3.2.-> 
          <li>пункт</li> <!-2.3.3.->  
        </ol> 
      </li> <!-2.3.-> 
      <li>пункт</li> <!-2.4.->   
    </ol> 
  </li> <!-2.-> 
  <li>пункт</li> <!-3.->         
  <li>пункт</li> <!-4.->         
</ol>