Formatierung bei verschachtelten Listen zum Aufklappen (Wiki-Artikel „Akkordeon mit details“)

[Anja]

Hallo,
ich habe eine Frage zu verschachtelten Aufklapplisten mit <details>. Vielleicht kann ja jemand helfen. Ich nutze den Formatierungsvorschlag aus dem Beitrag "Akkordeon mit details" zum Formatieren des Aufklappzeichens in ein sich drehendes '+'.

Soweit so gut.

Nun möchte ich auch verschachtelte Listen anlegen und scheitere an der Vererbung der Transformationseigenschaften.

Das Ziel: Level 1 '+' (blau) wird beim Aufklappen rot und dreht sich 45° Level 2 '+' sollte dann grün sein und beim Aufklappen schwarz werden und sich ebenfalls 45° drehen.

Mein Ergebnis: Level 1 '+' verhält sich wie gewünscht. Level 2 '+' ist sofort schwarz, nicht gedreht und verändert sich nicht beim Anklicken.

Kann mir jemand einen Tipp geben, wo mein Fehler liegt?

Meine Liste sieht so aus:

<details>
	<summary><h2>Aufklappen Level 1</h2></summary>
		<ul>
			<li>Level 1 Item 1</li>
			<li>
				<details>
					<summary class="second">Level 1 Item 2 = Aufklappen Level 2</summary>
						<ul>
							<li>Level 2 Item 1</li>
							<li>Level 2 Item 2</li>
							<li>Level 2 Item 3</li>
							<li>
								<details>
									<summary class="second">Level 2 Item 4 = Aufklappen Level 3</summary>
										<ul>
											<li>Level 3 Item 1</li>
											<li>Level 3 Item 2</li>
										</ul>
								</details>
							</li>
							<li>Level 2 Item 4</li>
						</ul>
				</details>
			</li>
			<li>Level 1 Item 3</li>
			<li>Level 1 Item 4</li>
		</ul>
</details>

Das CSS dazu:

/****** LISTEN AUFKLAPPEN *******/

summary {
   position: relative;  
   }

summary::marker, summary::-webkit-details-marker {
   color: transparent;
}

summary::after {
   content:  "+"; 
   position: absolute;
   color: blue;
   font-size: 2em;
   font-weight: bold; 
   left: 0em;
   top: 0em;
   transition: all 0.5s;
} 

details[open] summary::after {
 color: red;
 transform: translate(5px,0) rotate(45deg);
}




summary.second {
   position: relative;  
   }

summary.second::marker, summary.second::-webkit-details-marker {
   color: transparent;
}

summary.second::after {
   content:  "+"; 
   position: relative;
   color: green;
   font-size: 1em;
   font-weight: bold; 
   right: 1em;
   top: 0em;
   transition: all 0.5s;
} 

details[open] summary.second::after {
 color: black;
 transform: translate(5px,0) rotate(45deg);
}

Vielen Dank schon mal! Anja