HTML Details/Summary Element Marker Styling

Question

I have some CSS that styles the marker next to a summary element within a details element. The CSS itself works fine. However, if I nest another details element within the first one (creating a parent details element and a child details element), my marker content doesn't toggle properly. As soon as I open the parent, the child marker shows as being open even though that element is not open yet.

I am not sure if there is a proper selector to isolate the child details element from the parent in this case since the child is not open and there is no [closed] syntax in CSS that I am aware of. It appears than when nesting details elements, once the parent is open, all children are also "open". Has anyone run into something like this before?

summary {
    outline: none;
    font-size: 1.15em;
}

summary::-webkit-details-marker {
    display: none
}

summary:after {
    background: #da291c;
    border-color: #da291c;
    border-radius: 15px;
    content: "+";
    color: #fff;
    float: left;
    font-size: 1em;
    font-weight: bold;
    margin: -2px 10px 0 0;
    padding: 1px 0 3px 0;
    text-align: center;
    width: 30px;
}

details[open] summary:after {
    content: "-";
}

<details>
  <summary>Parent</summary>
  <p>
    Parent Holder Text
  </p>
  <details>
    <summary>Child</summary>
    <p>
      Child Holder Text
    </p>
  </details>
</details>

Answer 1

Your CSS is applying content: "-"; to all summary:after elements within details[open], so it cascades to children too. Try applying it to only direct children of the parent element with a child combinator (>)

details[open] > summary:after {
    content: "-";
}

Answer 2

details summary::-webkit-details-marker,
details summary::marker {
 display: none; 
 content: "";
}

if it doesn't work try this (::marker and content for chrome)