Nachtrag: <div>-Klasse header-1, header-2, header-3, header-4 und CSS Selector .header-2.
moin,
und guten Tag allerseits, ich möchte eine statische Überschrift-Struktur in einem HTML-Dokument mit CSS stylen.
Was ich konkret möchte
Ziel des Unterfangens ist es, jeweils ein anderes Icon zur der jeweiligen Überschrift der 2ten Ordnung mit ::before voran zu stellen und sie mit ::after statisch zu nummerieren.
Probleme
Es gestaltet sich allerdings schwierig, da das HTML-Dokument praktisch nur aus verschachtelten <div>s mit CSS-Klassen besteht 😕.
was ich versucht habe
/* ... */
.header-2:nth-of-type(2) :is( .h-2 )
position: relative;
display: flex;
flex-flow: row;
}
.header-2:nth-of-type(2) :is( .h-2 )::before {
order: -2;
background-image: url( 'ico-fingerprint.svg' );
}
.header-2:nth-of-type(2) :is( .h-2 )::after {
order: -1;
content:'2. ';
}
/* ... */
<!DOCTYPE html>
<html>
<!-- head -->
<body>
<!-- content -->
<div class="paragraph">...</div>
<div class="header-1"><div class="h-1"><span>Titel</span></h1></div></div>
<div class="paragraph">...</div>
<div class="header-2"><div class="h-2"><span>Überschrift 1</span></div></div>
<div class="header-3"><div class="h-3"><span>Überschrift 1.1. </span></div></div>
<div class="paragraph">...</div>
<div class="header-4"><div class="h-4"><span>Überschrift 1.1.1.</span></div></div>
<div class="paragraph">...</div>
<div class="paragraph">...</div>
<div class="header-4"><div class="h-4"><span>Überschrift 1.1.2.</span></div></div>
<div class="paragraph">...</div>
<div class="header-3"><div class="h-3"><span>Überschrift 1.2.</span></div></div>
<!-- content -->
</body>
</html>
Ich habe :nth-of-type(2) verwendet um das Kindelement der Klasse .header anzusprechen und nicht :nth-child() welches alle Kind-Elemente anspricht.
Ich habe auch :is( .h-2 ) verwendet um speziell die zweite überschrift zu selektieren
Meine Problem Analyse
Das Problem ist die Verschachtelung der Elemente die ich ansprechen will.
Wenn mit z.B. .header:nth-of-type(4) im <div> die Klasse-.header-2 selektieret wird und darunter ist kein <div>-Element der Klasse .h-2 verschachtelt sondern z.B. h-4, dann wird diese Selektion übersprungen. Ich darf also überhaupt keine zusätzlichen unter Überschriften unter der 2ten Ordnung verwenden, da alle das vorangestellte <div>-Tag mit der klasse .header haben, um die gewollte Überschrift-Struktur zu behalten.
Mein Fazit
Also muss ich entweder alle Überschriften unter der 2ten Ordnung weglassen oder akribisch komplett alle Überschriften verschachteln, was im Deteil schwer zu realisieren ist da z.B. Überschriften der 3ten Ordnung in einer Note enthält als in einer anderen Note.
Hintergrund
ich arbeite mit einer Note-Taking-App welche Markdown verwendet. Die App rendert Markdown Notes zu HTML im Editor und zwar live. Man kann benutzerdefinierte CSS zur einem einzelnen gerenderten Note-Inhalt im Editor einbinden, sodass sich dieser gerenderte Note über CSS anders darstellt.
Frage
Gibt es verschachtelte Techniken, die mit kombinierten Pseudoelementen arbeiten, um mein Problem zu lösen?
Ich freue mich auf AWs 👍 😊.
akzeptierte Antworten
Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage
MB
Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage
Gunnar Bittersmann
Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage
Gunnar Bittersmann
Matthias Scharwies
Rolf B