TS: Frage zu Selektoren

problematische Seite

Hello,

ich habe versucht, den Abstand zwischen h2 und p mittels Kindselektor einzustellen. Leider im FF 99.0 (64) keine Reaktion.

Erst, nachdem ich für p generell margin und padding auf 0 gestellt hatte, wurde h2>p beachtet.

Ist das Standard, dass irgendwelche Browser-Grundeinstellungen für bestimmte Elemente einfach weitergelten, obwohl man sie eigentlich durch CSS-Angaben überschrieben hat?

Glück Auf
Tom vom Berg

--
Es gibt nichts Gutes, außer man tut es!
Das Leben selbst ist der Sinn.

akzeptierte Antworten

  1. problematische Seite

    Servus!

    Hello,

    ich habe versucht, den Abstand zwischen h2 und p mittels Kindselektor einzustellen. Leider im FF 99.0 (64) keine Reaktion.

    Innerhalb von Überschriften (siehe: HTML/Elemente/h2) darfst Du nur Stil-Elemente (phrasing content) wie a, b, em, span und Klartext verwenden.

    In HTML/Kategorien_von_Elementen hat Der-Dennis sie 2015 mit Aussagen-Elemente übersetzt.

    Erst, nachdem ich für p generell margin und padding auf 0 gestellt hatte, wurde h2>p beachtet.

    Nimm lieber ein span-Element!

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. problematische Seite

    Hallo,

    ..., obwohl man sie eigentlich durch CSS-Angaben überschrieben hat?

    Deine Deutung ist falsch, du hast nichts überschrieben.

    Entweder hat der Browser dein HTml angepasst, dann solltest du Matthias' Rat anwenden oder du interpretierst dein html falsch, dann benötigst du den Geschwisterselektor statt des Kindselektors.

    Gruß
    Kalk

    1. problematische Seite

      @@Tabellenkalk

      Entweder hat der Browser dein HTml angepasst, dann solltest du Matthias' Rat anwenden oder du interpretierst dein html falsch, dann benötigst du den Geschwisterselektor statt des Kindselektors.

      Es kann wohl nur letzteres der Fall sein.

      Wie ein Browser sich bei <h2><p></p></h2> zu verhalten hat, ist in der HTML-Spec §13.2.6.4.7 genau festgelegt: im DOM ist p in h2 geschachtelt.

      So verhält sich auch Firefox. Und damit wirkt auch die Regel h2 > p { margin: 0 }, siehe Codepen.

      Das beschriebene Problem lässt sich nicht nachvollziehen, was nur den Schluss zulässt, dass das Problem falsch beschrieben ist.

      @TS hat wohl <h2></h2><p></p> im Mark-up und wundert sich, warum der Kindselektor h2 > p nicht greift, wenn p gar kein Kind von h2 ist.

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

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix
      1. problematische Seite

        Hello,

        @TS hat wohl <h1></h1><p></p> im Mark-up und wundert sich, warum der Kindselektor h1 > p nicht greift, wenn p gar kein Kind von h1 ist.

        Ach wie dumm! Genauso ist es. Also den Geschwister-Selector...

        Und es soll nur der direkt auf <h2></h2> folgende <p> im Abstand beeinflusst werden. Was musx ich da noch zusätzlich beachten?

        Glück Auf
        Tom vom Berg

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        1. problematische Seite

          Hallo,

          He Also den Geschwister-Selector...

          Und es soll nur der direkt auf <h2></h2> folgende <p> im Abstand beeinflusst werden. Was musx ich da noch zusätzlich beachten?

          Dann ist es wohl der Nachbarselektor.

          Gruß
          Kalk

        2. problematische Seite

          @@TS

          Ach wie dumm! Genauso ist es. Also den Geschwister-Selector...

          Und es soll nur der direkt auf <h2></h2> folgende <p> im Abstand beeinflusst werden. Was musx ich da noch zusätzlich beachten?

          Dass du den adjacent sibling combinator verwendest und nicht den general sibling combinator.

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

          --
          When the power of love overcomes the love of power the world will know peace.
          — Jimi Hendrix
          1. problematische Seite

            Hallo Gunnar,

            Also den Geschwister-Selector...

            Und es soll nur der direkt auf <h2></h2> folgende <p> im Abstand beeinflusst werden. Was musx ich da noch zusätzlich beachten?

            Dass du den adjacent sibling combinator verwendest und nicht den general sibling combinator.

            Einfacher wäre es, nur die h2 zu formatieren:

            h2 {
              margin-bottom: 9em;
            }
            

            Bis bald! Jonathan

            --
            "Es gibt Besserwisser, die niemals begreifen, dass man recht haben kann und trotzdem ein Idiot ist."
            1. problematische Seite

              @@Jonathan Harker

              Einfacher wäre es, nur die h2 zu formatieren:

              h2 {
                margin-bottom: 9em;
              }
              

              Nein. Es geht nicht darum, den Abstand zu vergrößern. Er soll kleiner (0) gemacht werden.

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

              --
              When the power of love overcomes the love of power the world will know peace.
              — Jimi Hendrix
  3. problematische Seite

    Moin,

    ich habe versucht, den Abstand zwischen h2 und p mittels Kindselektor einzustellen. Leider im FF 99.0 (64) keine Reaktion.

    das ist auch in Ordnung so.

    Erst, nachdem ich für p generell margin und padding auf 0 gestellt hatte, wurde h2>p beachtet.

    Sicher?

    Ist das Standard, dass irgendwelche Browser-Grundeinstellungen für bestimmte Elemente einfach weitergelten, obwohl man sie eigentlich durch CSS-Angaben überschrieben hat?

    Nein. Aber deine Beschreibung ist widersprüchlich. Du meinst vermutlich den Sibling Selector (also in deinem Beispiel h2+p), denn h2>p (Child Selector) würde ein p selektieren, das ein Kindelement von h2 ist. Das darf es aber nicht geben.

    Und bei aufeinanderfolgenden Elementen: Vorsicht Stolperfalle! Collapsing Margins!

    Einen schönen Tag noch
     Martin

    --
    Мир для України.
    1. problematische Seite

      @@Der Martin

      h2>p (Child Selector) würde ein p selektieren, das ein Kindelement von h2 ist. Das darf es aber nicht geben.

      Und wenn es das doch gibt, dann tut h2>p genau das, was von ihm erwartet wird: ein p zu selektieren, das ein Kindelement von h2 ist.

      CSS interessiert sich nicht dafür, was in HTML erlaubt ist und was nicht. Relevant ist einzig das generierte DOM.

      S.a. anderes Posting

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

      --
      When the power of love overcomes the love of power the world will know peace.
      — Jimi Hendrix