@@TS > Hingegen funktioniert `break-before` ausgezeichnet. > Allerdings möchte ich diese Anweisung für die jeweils erste `H2` nach einer `H1` nicht umgesetzt haben. Was muss ich da schreiben? Das hängt – Überraschung! – von deinem Markup ab. Hast du die Abschnitte als `section` ausgezeichnet? Oder hast du Spaghetti-Code à la ```html <h1>Allgemeine Erklärung der Menschenrechte</h1> <h2>Artikel 1</h2> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p> <h2>Artikel 2</h2> ⋮ ``` Im zweiten Fall kannst du eine für alle `h2` gesetzte Eigenschaft für die unmittelbar nach `h1` folgende zurücksetzen, bspw.: ```css h2 { break-before: page } h1 + h2 { break-before: revert } ``` Das geht freilich nur, wenn zwischen `h1` und `h2` kein anderer Inhalt ist. Besser dran bist du also mit ```css h2 { break-before: page } h2:first-of-type { break-before: revert } ``` Noch besser: Du setzt die Eigenschaft für die erste `h2` gar nicht erst: ```css, good h2:not(:first-of-type) { break-before: page } ``` ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjpVKKW) (dort für `margin-top`) --- Im ersten Fall, wenn du deinen Inhalt ordentlich strukturiert hast ```html <h1>Allgemeine Erklärung der Menschenrechte</h1> <section> <h2>Artikel 1</h2> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p> </section> <section> <h2>Artikel 2</h2> ⋮ ``` kannst du die `h2` aller Abschnitte außer des ersten per `section:not(:first-of-type) h2`{:.language-css} selektieren. Brauchst du aber nicht, sondern nicht auf die Überschriften, sondern gleich auf die Abschnitte anwenden: ```css, good section:not(:first-of-type) { break-before: page } ``` ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/GRQLqZd) (dort für `margin-top`) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@TS > Hingegen funktioniert `break-before` ausgezeichnet. > Allerdings möchte ich diese Anweisung für die jeweils erste `H2` nach einer `H1` nicht umgesetzt haben. Was muss ich da schreiben? Das hängt – Überraschung! – von deinem Markup ab. Hast du die Abschnitte als `section` ausgezeichnet? Oder hast du Spaghetti-Code à la ```html <h1>Allgemeine Erklärung der Menschenrechte</h1> <h2>Artikel 1</h2> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p> <h2>Artikel 2</h2> ⋮ ``` Im zweiten Fall kannst du eine für alle `h2` gesetzte Eigenschaft für die unmittelbar nach `h1` folgende zurücksetzen, bspw.: ```css h2 { break-before: page } h1 + h2 { break-before: revert } ``` Das geht freilich nur, wenn zwischen `h1` und `h2` kein anderer Inhalt ist. Besser dran bist du also mit ```css h2 { break-before: page } h2:first-of-type { break-before: revert } ``` Noch besser: Du setzt die Eigenschaft für die erste `h2` gar nicht erst: ```css, good h2:not(:first-of-type) { break-before: page } ``` ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjpVKKW) (dort für `margin-top`) --- Im ersten Fall, wenn du deinen Inhalt ordentlich strukturiert hast ```html <h1>Allgemeine Erklärung der Menschenrechte</h1> <section> <h2>Artikel 1</h2> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p> </section> <section> <h2>Artikel 2</h2> ⋮ ``` kannst du die `h2` aller Abschnitte außer des ersten per `section:not(:first-of-type) h2`{:.language-css} selektieren. Braucht du aber nicht, sondern nicht auf die Überschriften, sondern gleich auf die Abschnitte anwenden: ```css, good section:not(:first-of-type) { break-before: page } ``` ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/GRQLqZd) (dort für `margin-top`) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix

@@TS > Hingegen funktioniert `break-before` ausgezeichnet. > Allerdings möchte ich diese Anweisung für die jeweils erste `H2` nach einer `H1` nicht umgesetzt haben. Was muss ich da schreiben? Das hängt – Überraschung! – von deinem Markup ab. Hast du die Abschnitte als `section` ausgezeichnet? Oder hast du Spaghetti-Code à la ```html <h1>Allgemeine Erklärung der Menschenrechte</h1> <h2>Artikel 1</h2> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p> <h2>Artikel 2</h2> ⋮ ``` Im zweiten Fall kannst du eine für alle `h2` gesetzte Eigenschaft für die unmittelbar nach `h1` folgende zurücksetzen, bspw.: ```css h2 { break-before: page } h1 + h2 { break-before: revert } ``` Das geht freilich nur, wenn zwischen `h1` und `h2` kein anderen Inhalt ist. Besser dran bist du also mit ```css h2 { break-before: page } h2:first-of-type { break-before: revert } ``` Noch besser: Du setzt die Eigenschaft für die erste `h2` gar nicht erst: ```css, good h2:not(:first-of-type) { break-before: page } ``` ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/JjpVKKW) (dort für `margin-top`) --- Im ersten Fall, wenn du deinen Inhalt ordentlich strukturiert hast ```html <h1>Allgemeine Erklärung der Menschenrechte</h1> <section> <h2>Artikel 1</h2> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.</p> </section> <section> <h2>Artikel 2</h2> ⋮ ``` kannst du die `h2` aller Abschnitte außer des ersten per `section:not(:first-of-type) h2`{:.language-css} selektieren. Braucht du aber nicht, sondern nicht auf die Überschriften, sondern gleich auf die Abschnitte anwenden: ```css, good section:not(:first-of-type) { break-before: page } ``` ☞ [Beispiel](https://codepen.io/gunnarbittersmann/pen/GRQLqZd) (dort für `margin-top`) 🖖 Живіть довго і процвітайте {:@uk} -- *When the power of love overcomes the love of power the world will know peace.*{:@en} — Jimi Hendrix