tag:forum.selfhtml.org,2005:/self Kindselektor bei Elternelement mit Klasse – SELFHTML-Forum 2020-01-09T08:26:04Z https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762699?srt=yes#m1762699 Yadgar 2020-01-07T16:30:15Z 2020-01-07T16:30:15Z Kindselektor bei Elternelement mit Klasse <p>Hi(gh)!</p> <p>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> <pre><code class="block language-css"><span class="token selector">p.quote</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span>italic<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>20px <span class="token punctuation">}</span> </code></pre> <p>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> <pre><code class="block language-css"><span class="token selector">p.quote > p</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span>italic <span class="token punctuation">}</span> </code></pre> <p>was leider überhaupt nicht funktionierte - der gesamte Zitatabsatz blieb unformatiert! Was mache ich falsch?</p> <p>Bis bald im Khyberspace!</p> <p>Yadgar</p> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762700?srt=yes#m1762700 Tabellenkalk 2020-01-07T16:35:21Z 2020-01-07T16:35:21Z Kindselektor bei Elternelement mit Klasse <p>Hallo,</p> <p>Hast du denn wirklich verschachtelte Absätze?</p> <p>Zeig mal dein HTML.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762701?srt=yes#m1762701 JürgenB https://www.j-berkemeier.de 2020-01-07T16:36:16Z 2020-01-07T16:36:16Z Kindselektor bei Elternelement mit Klasse <p>Hallo,</p> <blockquote> <pre><code class="block language-css"><span class="token selector">p.quote</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span>italic<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>20px <span class="token punctuation">}</span> </code></pre> </blockquote> <p>das sieht aus wie p in p. Hast du das wirklich? So weit ich weiß, ist das nicht erlaubt.</p> <p>Oder suchst du den Nachbarkombinator oder den Geschwisterkombinator (siehe <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator</a>)?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762703?srt=yes#m1762703 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-01-07T16:45:34Z 2020-01-07T16:45:34Z Kindselektor bei Elternelement mit Klasse <p>@@Yadgar</p> <blockquote> <p>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> </blockquote> <p><code>blockquote</code> wäre das passende Element gewesen.</p> <blockquote> <p>Da ich die Absätze innerhalb eines solchen Zitats</p> </blockquote> <p>Solche gibt es nicht; <code>p</code>-Elemente kann man nicht verschachteln.</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zitat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Was du nicht sagst!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>führt zu folgendem DOM (bzw. was das Entwicklertool als solches anzeigt):</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zitat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Was du nicht sagst!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>versuchte ich mein Glück mit dem Kindkombinator:</p> <pre><code class="block language-css"><span class="token selector">p.quote > p</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span>italic <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Da es kein <code>p</code> in <code>p</code> gibt, wirst du damit kein Glück haben.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„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.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762702?srt=yes#m1762702 Yadgar 2020-01-07T16:44:56Z 2020-01-07T16:44:56Z Kindselektor bei Elternelement mit Klasse <p>Hi(gh)!</p> <blockquote> <p>Hallo,</p> <p>Hast du denn wirklich verschachtelte Absätze?</p> <p>Zeig mal dein HTML.</p> </blockquote> <p>Gegenwärtig sieht der Code so aus:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>quote<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Sehr geehrte/r Inserent/in,<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Info vom Heimorgelspezialisten: Ihre Orgel heißt richtig Yamaha Electone FS-30 - eine ES-Serie hat es von Yamaha nie gegeben! Baujahr übrigens 1983!<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> 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...<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Mit freundlichen Grüßen <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <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> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>quote<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>Bis bald im Khyberspace!</p> <p>Yadgar</p> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762706?srt=yes#m1762706 Rolf B 2020-01-07T16:57:39Z 2020-01-07T16:57:39Z Kindselektor bei Elternelement mit Klasse <p>Hallo JürgenB,</p> <blockquote> <p>So weit ich weiß, ist das nicht erlaubt.</p> </blockquote> <p>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.</p> <p>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:</p> <pre><code class="block language-css"><span class="token selector">blockquote</span> <span class="token punctuation">{</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Sehr geehrte/r Inserent/in,<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Info vom Heimorgelspezialisten: Ihre Orgel heißt richtig Yamaha Electone FS-30 - eine ES-Serie hat es von Yamaha nie gegeben! Baujahr übrigens 1983!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>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...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Mit freundlichen Grüßen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span> </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762719?srt=yes#m1762719 Auge 2020-01-08T08:08:37Z 2020-01-08T08:08:37Z Kindselektor bei Elternelement mit Klasse <p>Hallo</p> <blockquote> <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> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>quote<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Keine Absätze in Absätzen! Punkt. Um. Aus.</p> <p>Wenn du ein mehrabsätziges Zitat ausgeben willst, brauchst du ein anderes Element als <code>p</code>. <code>blockquote</code> bietet sich an … ach, was sag' ich, <a href="https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/blockquote" rel="nofollow noopener noreferrer">drängt sich geradezu auf</a>. Auch für aus einem (Ab)-Satz bestehende Zitate ist es das richtige Element.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>quote<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> [<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span> </code></pre> <p>Für Zitate als Teil eines (Ab)-Satzes wäre <code>q</code> <a href="https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/q" rel="nofollow noopener noreferrer">das zutreffende Element</a>.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762707?srt=yes#m1762707 Rolf B 2020-01-07T16:58:28Z 2020-01-07T16:58:28Z Kindselektor bei Elternelement mit Klasse <p>Hallo Gunnar,</p> <p>ach menno, immer bin ich noch am Schreiben während Du schon postest </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762709?srt=yes#m1762709 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-01-07T17:11:45Z 2020-01-07T17:11:45Z Kindselektor bei Elternelement mit Klasse <p>@@Rolf B</p> <blockquote> <p>blockquote rückt schon per Defaultstylesheet des Browsers ein</p> </blockquote> <p>Und das auch rechts. Wenn man das nicht will, muss man was anderes (0) angeben.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„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.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762708?srt=yes#m1762708 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-01-07T17:10:28Z 2020-01-07T17:10:28Z Kindselektor bei Elternelement mit Klasse <p>@@Rolf B</p> <blockquote> <p>ach menno, immer bin ich noch am Schreiben während Du schon postest </p> </blockquote> <p>Wir aus <a href="https://de.wikipedia.org/wiki/Villarriba_und_Villabajo" rel="nofollow noopener noreferrer">Villariba</a> sind halt fixer als ihr aus Villabajo.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„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.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762711?srt=yes#m1762711 Christian Kruse https://wwwtech.de/ 2020-01-07T17:18:16Z 2020-01-07T17:18:16Z Kindselektor bei Elternelement mit Klasse <p>Hallo Rolf,</p> <blockquote> <p>ach menno, immer bin ich noch am Schreiben während Du schon postest </p> </blockquote> <p>Mach dir nix draus: ich hab das Posting gerade erst gesehen und dachte auch „meh, das wollte ich auch schreiben“ </p> <p>Freundliche Grüße,<br> Christian Kruse</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762762?srt=yes#m1762762 marctrix self@mhis.de https://www.mhis.de 2020-01-09T08:26:04Z 2020-01-09T08:26:04Z Kindselektor bei Elternelement mit Klasse <p>Hej Christian,</p> <blockquote> <blockquote> <p>ach menno, immer bin ich noch am Schreiben während Du schon postest </p> </blockquote> <p>Mach dir nix draus: ich hab das Posting gerade erst gesehen und dachte auch „meh, das wollte ich auch schreiben“ </p> </blockquote> <p>Kannst du doch immer noch machen. </p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> https://forum.selfhtml.org/self/2020/jan/07/kindselektor-bei-elternelement-mit-klasse/1762722?srt=yes#m1762722 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-01-08T08:38:23Z 2020-01-08T08:38:23Z Kindselektor bei Elternelement mit Klasse <p>@@Auge</p> <blockquote> <p>… ach, was sag' ich, <a href="https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/blockquote" rel="nofollow noopener noreferrer">drängt sich geradezu auf</a>.</p> </blockquote> <p>Bei dieser Wiki-Seite drängen sich mehr Fragen auf als beantwortet werden.</p> <p>Was soll das Beispiel „Zitat und Adresse“? Was hat <code>address</code> auf einer Wiki-Seite zu suchen, bei der es um <code>blockquote</code> geht? Was hat beides miteinander zu tun?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„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.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div>