Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? bearbeitet von MB 14.10.2023 14:51 _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** ```css /* ... */ .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. '; } /* ... */ ``` ```html <!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 👍 😊.
Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? bearbeitet von MB 14.10.2023 15:16 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** ```css /* ... */ .header:nth-of-type(2) :is( .h-2 ) position: relative; display: flex; flex-flow: row; } .header:nth-of-type(2) :is( .h-2 )::before { order: -2; background-image: url( 'ico-fingerprint.svg' ); } .header:nth-of-type(2) :is( .h-2 )::after { order: -1; content:'2. '; } /* ... */ ``` ```html <!DOCTYPE html> <html> <!-- head --> <body> <!-- content --> <div class="paragraph">...</div> <div class="header"><div class="h-1"><span>Titel</span></h1></div></div> <div class="paragraph">...</div> <div class="header"><div class="h-2"><span>Überschrift 1</span></div></div> <div class="header"><div class="h-3"><span>Überschrift 1.1. </span></div></div> <div class="paragraph">...</div> <div class="header"><div class="h-4"><span>Überschrift 1.1.1.</span></div></div> <div class="paragraph">...</div> <div class="paragraph">...</div> <div class="header"><div class="h-4"><span>Überschrift 1.1.2.</span></div></div> <div class="paragraph">...</div> <div class="header"><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` 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 👍 😊.
Mit CSS Pseudo Elementen statische, verschachtelte HTML-Header Struktur ansprechen? bearbeitet von MB 14.10.2023 14:53 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** ```css /* ... */ .header:nth-of-type(2) :is( .h-2 ) position: relative; display: flex; flex-flow: row; } .header:nth-of-type(2) :is( .h-2 )::before { order: -2; background-image: url( 'ico-fingerprint.svg' ); } .header:nth-of-type(2) :is( .h-2 )::after { order: -1; content:'2. '; } /* ... */ ``` ```html <!DOCTYPE html> <html> <!-- head --> <body> <!-- content --> <div class="paragraph">...</div> <div class="header"><div class="h-1"><span>Titel</span></h1></div></div> <div class="paragraph">...</div> <div class="header"><div class="h-2"><span>Überschrift 1</span></div></div> <div class="header"><div class="h-3"><span>Überschrift 1.1. </span></div></div> <div class="paragraph">...</div> <div class="header"><div class="h-4"><span>Überschrift 1.1.1.</span></div></div> <div class="paragraph">...</div> <div class="paragraph">...</div> <div class="header"><div class="h-4"><span>Überschrift 1.1.2.</span></div></div> <div class="paragraph">...</div> <div class="header"><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` 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 👍 😊.
nicht angemeldet nicht angemeldet
