MB: Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

0 28

Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

MB
  • css
  • html
  • technik
  1. 0
    Matthias Scharwies
    1. 0
      MB
      1. 1
        Matthias Scharwies
      2. 0
        Gunnar Bittersmann
        • barrierefreiheit
        • css
        • html
        1. 0
          MB
          1. 0
            Gunnar Bittersmann
            • aria
            • barrierefreiheit
            • javascript
            1. 0
              MB
  2. 2

    Lösung: mit :nth-child(x of .header-1) gelöst

    MB
    1. 0
      Gunnar Bittersmann
      • html
  3. 0

    Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

    MB
    1. 1
      Rolf B
      1. 0
        MB
        1. 1
          Gunnar Bittersmann
          • css
          1. 0
            MB
            1. 2
              Gunnar Bittersmann
              1. 1
                Gunnar Bittersmann
    2. 1
      Gunnar Bittersmann
      • css
      1. 0
        MB
        1. 0
          Gunnar Bittersmann
          1. 0
            MB
            1. 1
              Gunnar Bittersmann
              1. 0
                MB
    3. 0

      Teil gelöst: Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

      MB
  4. 0
    Robert B.
    • html
    • markdown
    • software
    1. 0
      MB
      1. 0
        Robert B.
        1. 0
          MB
SELF-Forum

Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

MB (Versionen)
– Informationen zu den Bewertungsregeln

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 👍 😊.

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Servus!

    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

    
```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>

    Auweia Du hast gar keine Überschriften!

    Regel 1 - Guter_HTML-Stil - Text semantisch auszeichnen

    Ich habe :nth-of-type(2) verwendet um das Kindelement der Klasse .header anzusprechen und nicht :nth-child() welches alle Kind-Elemente anspricht.

    Erst dann: Sprich mit CSS alle h2 und h3 an - ist besser so

    HTML/Tutorials/Listen/Hybride_Nummerierung

    Herzliche Grüße

    Matthias Scharwies

    --
    Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
    Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
    Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
    Ihr Name ist Sandra.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

      MB
      – Informationen zu den Bewertungsregeln

      moin,

      Servus!

      moin,

      Auweia Du hast gar keine Überschriften!

      Ich weis 😭. Aber das ist Notwendig, wenn man live in Markdown editieren will.

      lgmb

      --
      Sprachstörung
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

        Matthias Scharwies
        +1 Informationen zu den Bewertungsregeln

        Servus!

        moin,

        Servus!

        moin,

        Auweia Du hast gar keine Überschriften!

        Ich weis 😭. Aber das ist Notwendig, wenn man live in Markdown editieren will.

        # Ü1

## ü2

### Ü3

        Hilfe:Forum/Markdown#Überschriften

        Herzliche Grüße

        Matthias Scharwies

        --

        --
        Jemand interessiert? Ein Freund von uns will zum Forumstreffen, und hat bereits Hotelübernachtungen gebucht.
        Er hat vergessen, dass er im gleichen Zeitraum auch heiratet.
        Also für Interessierte: Du könntest am 25. November um 14 Uhr im Rathaus von Hannover heiraten.
        Ihr Name ist Sandra.
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

      2. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@MB

        Auweia Du hast gar keine Überschriften!

        Ich weis 😭. Aber das ist Notwendig, wenn man live in Markdown editieren will.

        Warum das denn?

        Aber wenn du wirklich divs brauchst(?), dann mach sie mit ARIA zu Überschriften:[1][2]

        <div class="h-1"><span>Titel</span></h1>

        ↓

        <div class="h-1" role="heading" aria-level="1"><span>Titel</span></h1>

        Für die anderen Levels entsprechend aria-level="2", "3", "4".

        Die Klassen h-1 usw. brauchst du dann wohl nicht mehr; du kannst ja auch Attributselektoren [aria-level="1"] zum Stylen verwenden.

        Ohne role und aria-level hättest du eine Seite ohne Struktur (bzw. rein visuelle Struktur). Nutzer, die die visuelle Struktur nicht wahrnehmen können, sind auf die hierarchische document outline angewiesen. Screenreader-Nutzer verwenden Überschriften auch zur schnellen Navigation durch die Seite.

        Bezüglich Numerierung hat dich Matthias ja schon ins Wiki geschickt. Im Abschnitt Verschachtelte Kapitelzählung findest du genau deinen Anwendungsfall. Nur dass du eine Hierarchie-Ebene mehr hast, also noch einen Zähler mehr brauchst. (subsubsection?)

        🖖 Живіть довго і процвітайте

        --
        Ad astra per aspera

        1. Using ARIA: Roles, states, and properties ↩︎

        2. aria-level ↩︎

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

          MB
          – Informationen zu den Bewertungsregeln

          moin,

          @@MB

          Auweia Du hast gar keine Überschriften!

          Ich weis 😭. Aber das ist Notwendig, wenn man live in Markdown editieren [...]

          Danke, is mir alles durch ausgiebige Recherche Bewusst. Aber ich kann in dieses generierte HTML OHNE Plugins nicht einfach so reinspazieren und den Code ändern. Schön wäre es…. Der Obsidian Markdown-Editor stellt uns nur CSS bereit.

          Danke trotzdem 👍😉.

          lgmb

          --
          Sprachstörung
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@MB

            Aber ich kann in dieses generierte HTML OHNE Plugins nicht einfach so reinspazieren und den Code ändern.

            Du kannst das doch mit JavaScript tun:

            for (let level = 1; level <= 4; level++) {
  for (let headingElement of document.querySelectorAll(`.h-${level}`)) {
    headingElement.setAttribute('role', 'heading');
    headingElement.setAttribute('aria-level', level);
  }
}

            Solltest du mehr als 4 Hierarchie-Ebenen haben, entsprechend anpassen. Für aria-level gilt übrigens (AFAIK) nicht die Beschränkung auf 6 Ebenen wie in HTML.

            Das Script muss natürlich nach der Generierung des DOMs laufen.

            ☞ Codepen

            🖖 Живіть довго і процвітайте

            --
            Ad astra per aspera
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

              MB
              – Informationen zu den Bewertungsregeln

              moin,

              @@MB

              Aber ich kann in dieses generierte HTML OHNE Plugins nicht einfach so reinspazieren und den Code ändern.

              Du kannst das doch mit JavaScript tun:

              Leider nein 😕. Ohne Obsidian PlugIns funzt das nicht! Eigentlich sinnvoll und total nötig, damit man keinen Unfung treiben kann.

              lgmb

              --
              Sprachstörung
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

  2. Lösung: mit :nth-child(x of .header-1) gelöst

    MB
    +2 Informationen zu den Bewertungsregeln

    moin,

    ich hab mein Problem gelöst!

    Mit :nth-of-type() selektiert einen <tag>-Typ von Kind-Elementen. Aber mit nth-child(x of .header-1) selektiert man genau ein Element mit einer Klasse head-1 :-).

    lgmb

    --
    Sprachstörung
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Lösung: mit :nth-child(x of .header-1) gelöst

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@MB

      ich hab mein Problem gelöst!

      Aber noch nicht das der Nutzer.

      🖖 Живіть довго і процвітайте

      --
      Ad astra per aspera
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

    MB
    – Informationen zu den Bewertungsregeln

    moin,

    Ist es möglich, dass man nur mit CSS bestimmte HTML-Elemente welche kein Attribute besitzen zu selektieren? Diese beschriebene blanken HTML Element besitzen allerding ein verschachteltes HTML-Element mit einer Klasse welche das übergeordenten HTML element wiederum als beziter des untergeordneten Elementes auzeichnet. div > .h-2:nth-child(1 of ::before

    <!DOCTYPE html>
<html>
    <!-- head -->
    <body>
        <!-- content -->
        <div>...</div>
        <div><span class="h-2">Überschrift</span>
        <div><span class="h-3">Unter Überschrift</span>
        <div>...</div>
        <div><span class="h-2">Überschrift</span>
        <div>...</div>
        <!-- content -->
    </body>
</html>

    Ist es möglich durch CSS über diese verschachtelte Struktur diese Elemente per :before jeweils mit einem anderen Icon zu versehen? Wie...

    ...

    😀 Überschrift

    💯 Unter Überschrift

    ...

    👓 Überschrift

    ...

    Ist es mit Verschachtelungenund Kombination der CSS Struktur Pseudo-Selektoren möglich???

    Ich hoffe auf AWs 🙏.

    lgmb

    P.S.: Die Eingangsfrage habe ich mit seeehr statischem CSS gelöst.

    --
    Sprachstörung
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

      Rolf B
      +1 Informationen zu den Bewertungsregeln

      Hallo MB,

      ja. Aber nicht ganz einfach. Du hast eine lineare Liste von div Elementen, die die eigentlichen Inhalte enthalten?

      Du kannst also nicht einfach mit .h-3:nth-of-type oder :nth-child arbeiten, weil die jeweiligen spans immer die ersten im div sind. Ich mutmaße, dass man hier mit :nth-child (x OF y) weiterkommt und :has() - müsste aber für die richtige Kombination experimentieren und habe dafür heute abend und auch morgen keine Zeit.

      @Gunnar Bittersmann, funzt das irgendwie?

      Rolf

      --
      sumpsi - posui - obstruxi
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

        MB
        – Informationen zu den Bewertungsregeln

        moin,

        ja. Aber nicht ganz einfach. Du hast eine lineare Liste von div Elementen, die die eigentlichen Inhalte enthalten?

        Mein dumm gewähltes Beispiel, sry! Raus kommen würde das…

        ...

        💯1. H2

        🔢1.1. H3

        Bla bla

        😀1.2. H3
        H4 (← Da kämme z.B. kein Icon und Smily hin)
        H3 (← Da kämme z.B. auch nicht)

        🐵2. H2

        🍇2.1. H3

        Bla Bla

        Bla Bla

        Bla Bla

        ...

        Nur bestimmte Headers würden n Icon + Nummer verpasst, definiert über Verschachtelung.

        Du kannst also nicht einfach mit .h-3:nth-of-type oder :nth-child arbeiten, weil die jeweiligen spans immer die ersten im div sind.

        Richtig!

        Ich mutmaße, dass man hier mit :nth-child (x OF y) weiterkommt und :has() - müsste aber für die richtige Kombination experimentieren [...]

        …deswegen hatte ich hier gefragt, weil ich in CSS kein Profi bin.

        […] und habe dafür heute abend und auch morgen keine Zeit.

        Verstehe. Keinen Stress 😊👍. Nochmal vielen Herzlichen Dank für deinen AWs

        lgmb

        --
        Sprachstörung
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

          Gunnar Bittersmann Homepage des Autors
          +1 Informationen zu den Bewertungsregeln

          @@MB

          Nur bestimmte Headers würden n Icon + Nummer verpasst, definiert über Verschachtelung.

          Und welche? Die h-2- und die h-3-Header?

          Erwähnte ich schon @counter-style?

          Ich hab das mal beispielhaft für h-2 gemacht. Statt DSC und SNW nimmst du die Emoji, die du haben willst.

          Für h-3 kannst du das genauso machen. Allerdings hätten dann 1.1, 2.1, 3.1, … dieselben Emoji, ebenso 1.2, 2.2, 3.2, … usw.

          Wenn du für jedes Unterkapitel verschiedene Folgen von Emoji haben willst, müsste man da noch mehr Gehirnschmalz reinstecken. Wenn dein Kram eine ordentliche Struktur hätte, wäre das ein Leichtes. Aber so?

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
          Beitrag melden
          +1
          Informationen zu den Bewertungsregeln

          1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

            MB
            – Informationen zu den Bewertungsregeln

            moin,

            Nur bestimmte Headers würden n Icon + Nummer verpasst, definiert über Verschachtelung.

            Erwähnte ich schon @counter-style?

            Stimmt! Das wäre ein guter Ansatz! Danke.
            …und ja, das hast du erwähnt, hab ich aber nicht weiter verfolgt. Mein Fehler!!!

            Ich hab das mal beispielhaft für h-2 gemacht. Statt DSC und SNW nimmst du die Emoji, die du haben willst.

            Bei Firefox funzt das Beispierl micht, bei Chrom schon

            Für h-3 kannst du das genauso machen. Allerdings hätten dann 1.1, 2.1, 3.1, … dieselben Emoji, ebenso 1.2, 2.2, 3.2, … usw.

            I see,

            Wenn du für jedes Unterkapitel verschiedene Folgen von Emoji haben willst, müsste man da noch mehr Gehirnschmalz reinstecken. Wenn dein Kram eine ordentliche Struktur hätte, wäre das ein Leichtes. Aber so?

            Wie schon erwähnt, habe ich die HTML-Struktur nicht gemacht. Ich hab nur n Abbild davon genommen.

            Schönen Abend

            lgmb

            --
            Sprachstörung
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

              Gunnar Bittersmann Homepage des Autors
              +2 Informationen zu den Bewertungsregeln

              @@MB

              Ich hab das mal beispielhaft für h-2 gemacht. Statt DSC und SNW nimmst du die Emoji, die du haben willst.

              Bei Firefox funzt das Beispierl micht

              In meinem Firefox schon. 😏

              Aber ja, :has() ist im Firefox noch hinter einem Feature-Flag versteckt.

              Aber womöglich brauchst du das gar nicht.

              Wie schon erwähnt, habe ich die HTML-Struktur nicht gemacht.

              Niemand hat dort HTML-Struktur gemacht. Es gibt keine Struktur. Das ist ja das Übel. Sowohl für Nutzer als auch fürs Styling.

              Ich hab nur n Abbild davon genommen.

              Leider nicht. Du hast mehrere Abbilder davon genommen, die widersprüchlich sind.

              Zuerst:

              <div class="header-2"><div class="h-2"><span>Überschrift 1</span></div></div>

              Dann:

              <div><span class="h-2">Überschrift</span></div>

              Ja, was denn nun?? Haben die div- oder die span-Elemente die h-…-Klassen?

              Wenn’s die div sind, geht’s ohne :has(). Beispiel, Teil 2.

              🖖 Живіть довго і процвітайте

              --
              Ad astra per aspera
              Beitrag melden
              +2
              Informationen zu den Bewertungsregeln

              1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

                Gunnar Bittersmann Homepage des Autors
                +1 Informationen zu den Bewertungsregeln

                @@Gunnar Bittersmann

                Wenn’s die div sind, geht’s ohne :has(). Beispiel, Teil 2.

                Und dann geht auch, für die einzelnen Abschnitte verschiedene @counter-styles zu verwenden.

                Dann kommt auch das von dir schon erwähnte :nth-child(… of …) ins Spiel.[1]

                ☞ Teil 3

                🖖 Живіть довго і процвітайте

                --
                Ad astra per aspera

                1. :nth-child(2 of .h-2) ~ .h-3 sieht schöner aus als .h-2 ~ .h-2 ~ .h-3. ↩︎

                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln

    2. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

      Gunnar Bittersmann Homepage des Autors (Versionen)
      +1 Informationen zu den Bewertungsregeln

      @@MB

      Ist es möglich, dass man nur mit CSS bestimmte HTML-Elemente welche kein Attribute besitzen zu selektieren? Diese beschriebene blanken HTML Element besitzen allerding ein verschachteltes HTML-Element mit einer Klasse welche das übergeordenten HTML element wiederum als beziter des untergeordneten Elementes auzeichnet.

      Mit

      div:has(>.h-2)::before {
	content: '😀 ';
}

      verpasst du allen div, die ein Kind der Klasse h-2 haben, vorn ein 😀. (Demnächst auch in Ihrem Firefox.)

      Das willst du aber nicht, oder?

      😀 Überschrift

      💯 Unter Überschrift

      ...

      👓 Überschrift

      Mir scheint, du willst @counter-style verwenden?

      🖖 Живіть довго і процвітайте

      --
      Ad astra per aspera
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

        MB
        – Informationen zu den Bewertungsregeln

        moin,

        verpasst du allen div, die ein Kind der Klasse h-2 haben, vorn ein 😀. (Demnächst auch in Ihrem Firefox.) […].

        Nein leider nicht 😕.

        Mir scheint, du willst @counter-style verwenden?

        Habe ich auch Eingesetzt und bei euch in Selfhtml und Stackoverflow und grade auf Mozilla recherchiert.

        Leider nix, deswegen Frage ich hier bei den Profis 😀. Ich hab das Beispiel bei @@Rolf B besser formuliert. Ich hoffe du weis was ich meine 🙏🙄.

        Aber Herzlichen Dank für deine Hilfe 😃👍.

        lgmb

        --
        Sprachstörung
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@MB

          verpasst du allen div, die ein Kind der Klasse h-2 haben, vorn ein 😀. (Demnächst auch in Ihrem Firefox.) […].

          Nein leider nicht 😕.

          Nein? Doch. Oh! (in Chrome (u.a. Chromia?); nicht in Safari; anscheinend noch fehlerhaft in Firefox mit gesetztem layout.css.has-selector.enabled-Flag)

          Ich hoffe du weis was ich meine 🙏🙄.

          Nö. Mir ist unklar, welches Icon vor welcher Überschrift erscheinen soll. Was ist die Regel dafür?

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

            MB (Versionen)
            – Informationen zu den Bewertungsregeln

            moin,

            Nein? Doch. Oh! (in Chrome (u.a. Chromia?); nicht in Safari; anscheinend noch fehlerhaft in Firefox mit gesetztem layout.css.has-selector.enabled-Flag)

            Ich glaube du hast den </div> Tag am Schluss nach dem </span> vergessen.

            aber bei mir wird in Firefox auch nix angezeigt, jedoch aber wie du erwähnt hast in Chrom

            Ich hoffe du weis was ich meine 🙏🙄.

            Nö. Mir ist unklar, welches Icon vor welcher Überschrift erscheinen soll. Was ist die Regel dafür?

            Ich hab eine zweite Lösung gefunden mit letzten Fragen an euch und einer möglichen Lösung diesen letzten Fragen.

            lgmb

            --
            Sprachstörung
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

              Gunnar Bittersmann Homepage des Autors
              +1 Informationen zu den Bewertungsregeln

              @@MB

              Ich glaube du hast den </div> Tag am Schluss nach dem </span> vergessen.

              Ich? Ich hab doch nur deinen Code in den Codepen gekippt. Und ja, da fehlten </div>-End-Tags.

              aber bei mir wird in Firefox auch nix angezeigt

              Da haben die Firefox-Entwickler noch ein bisschen was zu tun, bevor sie :has() freischalten können.

              🖖 Живіть довго і процвітайте

              --
              Ad astra per aspera
              Beitrag melden
              +1
              Informationen zu den Bewertungsregeln

              1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

                MB (Versionen)
                – Informationen zu den Bewertungsregeln

                moin,

                Ich? Ich hab doch nur deinen Code in den Codepen gekippt. Und ja, da fehlten </div>-End-Tags.

                Verdammt!!! Stimmt! Das ist mein Code. Bitte Verzeihe @@Gunnar Bittersmann 😟🙏!!! Ich bin bekanntlich dauerverpeilt 😓 - seit ich geschlüpft bin. Bitte nimms mir nicht Übel 😅.

                lgmb

                --
                Sprachstörung
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

    3. Teil gelöst: Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage

      MB
      – Informationen zu den Bewertungsregeln

      moin,

      hab n Teil gelöst und zwar die automatische nummerierung der Überschriften als div > span und als div > h{1-6}

      Obsidian Editor:

      /* Source View, Preview */
/* Read View */

.HyperMD-header-1,
.HyperMD-header-1div:has( h1 ) {
  counter-reset: h2;
}

/* ... */

.cm-header-2::before,
h2::after {
  counter-increment: h2;
  content: counter(h2) ". ";
}

/* ... */

      …jedoch ist mir schleierhaft, wie man mit CSS ohne eindeutige Identifizierung ein individuelles Icon vergeben kann?

      Ich könnte mir die CSS Anweisungskettevorstellen, die sich die Identifizierung von CSS Elementen an den Eltern-Elementen orientiert. Wie…

      Z.B.
      Wenn das Eltern Element, das 2te Element im Header Baum ist…
      …und noch ein Eltern Element hat, welches das 5te Element im Header Baum ist…
      → …dann vergebe in diesem Element diese individuelle Eigenschaft usw…

      Jedoch müsste es eine feste Struktur der Elemente geben, nehme ich an, die zwischen Schübe an Elementen im CSS Baum nicht tolleriert.

      Ein wunderschönes Rest-Wochenende wünsche ich euch allen 😊✌️!

      lgmb

      --
      Sprachstörung
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  4. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

    Robert B.
    – Informationen zu den Bewertungsregeln

    Moin MB,

    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.

    wieso erzeugt diese Software ohne Not eigentlich solchen HTML-Code?

    <!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>

    Wie sieht denn der Markdown-Code dahinter aus? Meiner naiven Vorstellung nach sollte sich so etwas wie

    # Titel

…

## Überschrift 1
###Überschrift 1.1.

…

#### Überschrift 1.1.1.

…

…

#### Überschrift 1.1.2.

…

### Überschrift 1.2.

    doch ziemlich einfach in semantisches HTML á la

    <h1>Titel</h1>
<p>…</p>
<h2>Überschrift 1</h2>
<h3>Überschrift 1.1.</h3>
<p>…</p>
<h4>Überschrift 1.1.1.</h4>
<p>…</p>
<p>…</p>
<h4>Überschrift 1.1.2.</h4>
<p>…</p>
<h3>Überschrift 1.2.</h3>

    transformieren lassen.

    Viele Grüße
    Robert

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

      MB
      – Informationen zu den Bewertungsregeln

      moin,

      […] ich arbeite mit einer Note-Taking-App welche Markdown verwendet. Die App rendert Markdown Notes zu HTML im Editor und zwar live. […]

      wieso erzeugt diese Software ohne Not eigentlich solchen HTML-Code? […]

      Ein von mir entwickeltes Beispiel. Aber es soll das Problem mit den verschachtelten <div>s verdeutlichen welche nur über Klassen anzusprechen sind.

      Wie sieht denn der Markdown-Code dahinter aus? Meiner naiven Vorstellung nach sollte sich so etwas wie […]

      Korrekt 👍😊

      doch ziemlich einfach in semantisches HTML á la

      Die App generiert im Editor HTML-Code in dreifacherform: Nämlich Source View, Live Preview und Read View. Sie werden alle in der HTML Klasse View Container zeitgleich und live generiert. Also sind drei Inhalt dieser Note untereinander gerendert und davon ist nur eins für den User sichtbar jenach dem welchen View der User wählt.

      Schönen Wochenstart 😀

      lgmb

      --
      Sprachstörung
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

        Robert B.
        – Informationen zu den Bewertungsregeln

        Moin MB,

        […] ich arbeite mit einer Note-Taking-App welche Markdown verwendet. Die App rendert Markdown Notes zu HTML im Editor und zwar live. […]

        wieso erzeugt diese Software ohne Not eigentlich solchen HTML-Code? […]

        Ein von mir entwickeltes Beispiel. Aber es soll das Problem mit den verschachtelten <div>s verdeutlichen welche nur über Klassen anzusprechen sind.

        ist der HTML-Code das Beispiel oder die Software, die aus Markdown div-Suppe kocht?

        doch ziemlich einfach in semantisches HTML á la

        Die App generiert im Editor HTML-Code in dreifacherform: Nämlich Source View, Live Preview und Read View. Sie werden alle in der HTML Klasse View Container zeitgleich und live generiert. Also sind drei Inhalt dieser Note untereinander gerendert und davon ist nur eins für den User sichtbar jenach dem welchen View der User wählt.

        Das ist jetzt keine inhaltliche Antwort auf meinen Punkt. Mir deucht, dass @Gunnar Bittersmann die Situation schon gut erkannt hat 😉

        Viele Grüße
        Robert

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen?

          MB
          – Informationen zu den Bewertungsregeln

          moin,

          Ein von mir entwickeltes Beispiel. […]

          ist der HTML-Code das Beispiel oder die Software, die aus Markdown div-Suppe kocht?

          Ein von mir entwickeltes Beispiel 😉, was die Struktur der App nachbildet.

          Ich hab meine aktuellen Fragen allerding gelöst durch eure Denkanstöße. Also Danke @@Gunnar Bittersmann, @@Rolf B, @@Matthias Scharwies und Du 🤗.

          Ich quäle euch in der Zukunft noch mit weiteren Fragen 😉!

          Die App generiert im Editor HTML-Code in dreifacherform[…]

          Das ist jetzt keine inhaltliche Antwort auf meinen Punkt. […]

          🤨??? Sry, ich habe deine Aussage nich ganz gerafft

          lgmb

          --
          Sprachstörung
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln