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>
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: "-";
}