Frage zu Selektoren

[TS]

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

[Matthias Scharwies]

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

[Tabellenkalk]

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

[Gunnar Bittersmann]

@@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.

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

[TS]

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

[Tabellenkalk]

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

[Gunnar Bittersmann]

@@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.

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

[Jonathan Harker]

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

[Gunnar Bittersmann]

@@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.

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

[Der Martin]

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

[Gunnar Bittersmann]

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

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