How to fix incorrect display of the nested grouping symbol in the "details" tag?

Question

If the top level is expanded, then all nested levels are assigned the "-" symbol, even if they are collapsed: 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>

Answer 1

Your CSS selector for the open details is slightly off:

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

This will select all summary elements which are children of an open details element, (including non-direct children)

To only select only the direct child of the open details, you should use the > selector:

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