trying CSS nesting feature with pseudo element ::marker but found it strange that this nesting does not work
details {
padding: 4px;
& summary {
color: red;
& ::marker {
color: green;
}
}
}
while this works
details {
padding: 4px;
& summary {
color: red;
}
& ::marker {
color: green;
}
}
below is my code snippet to run
details.default{
padding: 4px;
background-color: aliceblue;
border-left: 1rem solid #f16db9;
& summary {
color: red;
font-size: large;
cursor: pointer;
}
& ::marker {
color: green
}
}
details.other {
padding: 4px;
background-color: aliceblue;
border-left: 1rem solid #f16db9;
& summary {
color: red;
font-size: large;
cursor: pointer;
& ::marker {
color: green;
}
}
}<details class="default">
<summary>default question</summary>
<p>default answer</p>
</details>
<details class="other">
<summary>other question</summary>
<p>other answer</p>
</details>so does ::marker is a part of <summary> or <details> here? while in inspect Element it show under
