Yadgar: Kindselektor bei Elternelement mit Klasse

Hi(gh)!

Für mein Offline(!!!, dies nur als diskreten Hinweis an die Hüter der Orthodoxie...)-Tagebuch habe ich für eingerückte Zitate eine Absatz-Klasse p.quote eingeführt:

p.quote { font-style:italic; margin-left:20px }

Da ich die Absätze innerhalb eines solchen Zitats ebenfalls kursiv (aber relativ zum Elternelement nicht weiter eingerückt) haben will, versuchte ich mein Glück mit dem Kindkombinator:

p.quote > p { font-style:italic }

was leider überhaupt nicht funktionierte - der gesamte Zitatabsatz blieb unformatiert! Was mache ich falsch?

Bis bald im Khyberspace!

Yadgar

  1. Hallo,

    Hast du denn wirklich verschachtelte Absätze?

    Zeig mal dein HTML.

    Gruß
    Kalk

    1. Hi(gh)!

      Hallo,

      Hast du denn wirklich verschachtelte Absätze?

      Zeig mal dein HTML.

      Gegenwärtig sieht der Code so aus:

      <p class="quote">
        Sehr geehrte/r Inserent/in,<br>
      	<br>
      	Info vom Heimorgelspezialisten: Ihre Orgel heißt richtig Yamaha Electone FS-30 - eine ES-Serie hat es von Yamaha nie gegeben! Baujahr übrigens 1983!<br>
      	<br>
      	Kaufen und mitnehmen kann ich Ihre Orgel allerdings nicht, da hier schon eine ziemlich große Orgel (Technics SX-G5) steht und ich keinen Platz für eine Zweitorgel habe! Obwohl ich ja im Prinzip Heimorgelsammler bin...<br>
      	<br>
      	Mit freundlichen Grüßen
      </p>
      

      ...und so sieht es im Browser auch korrekt aus - aber das ist natürlich die Dummenversion von verschachtelten Absätzen, eigentlich wollte ich etwas wie

      <p class="quote">
        <p>
          ...
        </p>
      </p>
      

      Bis bald im Khyberspace!

      Yadgar

      1. Hallo

        ...und so sieht es im Browser auch korrekt aus - aber das ist natürlich die Dummenversion von verschachtelten Absätzen, eigentlich wollte ich etwas wie

        <p class="quote">
          <p>
            ...
          </p>
        </p>
        

        Keine Absätze in Absätzen! Punkt. Um. Aus.

        Wenn du ein mehrabsätziges Zitat ausgeben willst, brauchst du ein anderes Element als p. blockquote bietet sich an … ach, was sag' ich, drängt sich geradezu auf. Auch für aus einem (Ab)-Satz bestehende Zitate ist es das richtige Element.

        <blockquote class="quote">
          <p>
            ...
          </p>
          [<p>
            ...
          </p>]
        </blockquote>
        

        Für Zitate als Teil eines (Ab)-Satzes wäre q das zutreffende Element.

        Tschö, Auge

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett
        1. @@Auge

          … ach, was sag' ich, drängt sich geradezu auf.

          Bei dieser Wiki-Seite drängen sich mehr Fragen auf als beantwortet werden.

          Was soll das Beispiel „Zitat und Adresse“? Was hat address auf einer Wiki-Seite zu suchen, bei der es um blockquote geht? Was hat beides miteinander zu tun?

          LLAP 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
  2. Hallo,

    p.quote { font-style:italic; margin-left:20px }
    

    das sieht aus wie p in p. Hast du das wirklich? So weit ich weiß, ist das nicht erlaubt.

    Oder suchst du den Nachbarkombinator oder den Geschwisterkombinator (siehe https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator)?

    Gruß
    Jürgen

    1. Hallo JürgenB,

      So weit ich weiß, ist das nicht erlaubt.

      Genau das ist auch der Punkt. CSS wirkt auf das DOM, nicht auf den HTML Source, und der Browser beendet ein p Element, wenn ein neues beginnt. Sie schachteln sich nicht. Das sieht man im DOM Inspektor des Browsers.

      Yadgar, verwende an Stelle des äußeren p z.B. ein blockquote Element, das wäre semantisch korrekt und es erlaubt flow content (fließenden Inhalt), wozu auch p gehört. blockquote rückt schon per Defaultstylesheet des Browsers ein, bzw. das kannst man auch selbst genauer spezifizieren:

      blockquote {
         font-style: italic;
         margin-left: 1.5em;
      }
      
      <blockquote>
        <p>Sehr geehrte/r Inserent/in,</p>
        <p>Info vom Heimorgelspezialisten: Ihre Orgel heißt richtig
           Yamaha Electone FS-30 - eine ES-Serie hat es von Yamaha
           nie gegeben! Baujahr übrigens 1983!</p>
        <p>Kaufen ud mitnehmen kann ich Ihre Orgel allerdings nicht,
           da hier schon eine ziemlich große Orgel (Technics SX-G5)
           steht und ich keinen Platz für eine Zweitorgel habe! Obwohl
           ich ja im Prinzip Heimorgelsammler bin...</p>
        <p>Mit freundlichen Grüßen</p>
      </blockquote>
      

      Rolf

      --
      sumpsi - posui - clusi
      1. @@Rolf B

        blockquote rückt schon per Defaultstylesheet des Browsers ein

        Und das auch rechts. Wenn man das nicht will, muss man was anderes (0) angeben.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
  3. @@Yadgar

    Für mein Offline(!!!, dies nur als diskreten Hinweis an die Hüter der Orthodoxie...)-Tagebuch habe ich für eingerückte Zitate eine Absatz-Klasse p.quote eingeführt:

    blockquote wäre das passende Element gewesen.

    Da ich die Absätze innerhalb eines solchen Zitats

    Solche gibt es nicht; p-Elemente kann man nicht verschachteln.

    <p class="zitat">
      <p>Was du nicht sagst!</p>
    </p>
    

    führt zu folgendem DOM (bzw. was das Entwicklertool als solches anzeigt):

    <p class="zitat">
    </p>
    <p>Was du nicht sagst!</p>
    <p></p>
    

    versuchte ich mein Glück mit dem Kindkombinator:

    p.quote > p { font-style:italic }
    

    Da es kein p in p gibt, wirst du damit kein Glück haben.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Hallo Gunnar,

      ach menno, immer bin ich noch am Schreiben während Du schon postest 😉

      Rolf

      --
      sumpsi - posui - clusi
      1. @@Rolf B

        ach menno, immer bin ich noch am Schreiben während Du schon postest 😉

        Wir aus Villariba sind halt fixer als ihr aus Villabajo.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
      2. Hallo Rolf,

        ach menno, immer bin ich noch am Schreiben während Du schon postest 😉

        Mach dir nix draus: ich hab das Posting gerade erst gesehen und dachte auch „meh, das wollte ich auch schreiben“ 😉

        Freundliche Grüße,
        Christian Kruse

        1. Hej Christian,

          ach menno, immer bin ich noch am Schreiben während Du schon postest 😉

          Mach dir nix draus: ich hab das Posting gerade erst gesehen und dachte auch „meh, das wollte ich auch schreiben“ 😉

          Kannst du doch immer noch machen. 😂

          Marc

          --
          Ceterum censeo Google esse delendam