Как настроить корректное отображение иконок состояние «спойлера» для внутренних блоков?

Question

[N56544]

Имеется несколько вложенных блоков спойлеров (details) с измененными иконками раскрытия. Но на данный момент при раскрытии верхнего меняются и иконки всех внутренних. Не смотря на то, что они находятся в свёрнутом состоянии.

Как это победить и настроить отображение в соответствии с текущим состоянием спойлера?

Код на jsfiddle: https://jsfiddle.net/su9ybkhe/

<details>
  <summary>СПОЙЛЕР 1</summary>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  
  <details>
  <summary>СПОЙЛЕР 2</summary>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  </details>
  
  <details>
    <summary>СПОЙЛЕР 3</summary>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
  </details>  
</details>

/* ИЗМЕНЕНИЕ МАРКЕРА */

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

details > summary {
  list-style: none;
}

details summary:before {
  content: '+';
  margin-right: 7px;
}

details[open] summary:before {
  content: '-';
}


/*-------------------------*/
a {
  display: block;
}

Answer 1

[Вадим]

Не жадничать с >
details > summary:before {}
details[open] > summary:before {}

Comments

[N56544]

Точн. Спасибо. Я не заметил, что он это ко всем summary применяет :)