Блог

Если верхний уровень развернут, то всем вложенным уровням присваивается символ» -«, даже если они свернуты: jsfiddle.net/acces969/4eh6puvk/1/

 <div class="treeHTML">Root
  <div>level 1
    <details><summary></summary>
      <div >level 2
        <details><summary></summary>
          <div >
            level 3
          </div>
        </details>
      </div>
    </details>
  </div>
</div>
 

Ваш CSS-селектор для открытых сведений немного отключен:

 .treeHTML details[open] summary:before {/* styles */}
 

При этом будут выбраны все summary элементы, которые являются дочерними элементами элемента открытых сведений (включая непрямых дочерних элементов).

Чтобы выбрать только прямой дочерний элемент открытых сведений, следует использовать > селектор:

 .treeHTML details[open] > summary:before {/* styles */}