tag:forum.selfhtml.org,2005:/selfCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden – SELFHTML-Forum2018-03-10T07:07:31Zhttps://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715181#m1715181iloveHTML2018-03-06T12:02:20Z2018-03-06T12:02:20ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo zusammen</p>
<p>ich meinem HTML Dokument befindet sich eine Mastertabelle. In dieser Tabelle befinden sich weitere Tabellen, um den Spaltenaufbau und die Struktur der Seite zu bestimmen.</p>
<p>Nun möchte ich nur EINE Tabelle mit</p>
<p><STYLE TYPE="text/css">
tr:nth-child(even) {background-color: #D4D4D4;}
tr:nth-child(odd) {background-color: #FFFFFF;}
</STYLE></p>
<p>als Zebrastreifentabelle formatieren.</p>
<p>Leider wird dieser Code auf ALLE Tabellen angwendet. Wie kann ich das verhindern? Wie kann ich
es so hinbekommen, daß nur eine Tabelle diese Anweisungen erhält?</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715182#m1715182Henry2018-03-06T12:14:18Z2018-03-06T12:14:18ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<blockquote>
<p>In dieser Tabelle befinden sich weitere Tabellen, um den Spaltenaufbau und die Struktur der Seite zu bestimmen.</p>
</blockquote>
<p>Sollte nicht so sein, Tabellendesign ist verpönt, weil es bessere Wege gibt.</p>
<blockquote>
<p><STYLE TYPE="text/css">
tr:nth-child(even) {background-color: #D4D4D4;}
tr:nth-child(odd) {background-color: #FFFFFF;}
</STYLE></p>
<p>als Zebrastreifentabelle formatieren.</p>
</blockquote>
<blockquote>
<p>Leider wird dieser Code auf ALLE Tabellen angwendet. Wie kann ich das verhindern? Wie kann ich
es so hinbekommen, daß nur eine Tabelle diese Anweisungen erhält?</p>
</blockquote>
<p>Indem du die gewünschte Tabelle identifizierst. Also zb. id="zebra" und dann das CSS nur darauf anwendest zb.</p>
<p>#zebra{...}</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715250#m1715250MrMurphy12018-03-06T14:31:37Z2018-03-06T14:38:27ZZu Ebay<p>Hallo</p>
<p>Folgendes zu Ebay:</p>
<p>Für die eigenen Angaben im Angebot ist CSS ausdrücklich erlaubt und erwünscht. Dieses kann intern oder extern eingebunden werden. Das CSS darf sich nur nicht auf die Inhalte von Ebay selbst auswirken.</p>
<p>Direkt verboten sind seit 2017 JavaScript und andere aktive Inhalte. Dies dient dem Käuferschutz und soll verhindern, dass Angebote während der Laufzeit oder danach noch verändert werden. Zudem wird so in der Regel die Zeit zum Seitenaufbau vermindert.</p>
<p>Auch ab 2017 verlangt Ebay von gewerblichen Händlern für ihre Angebote ein Responsive Design. Übersetzt: Die haben die Schnauze voll von veralteten Lösungen wie Tabellendesigns wie von iloveHTML (ein seltsamer Name für seine nicht vorhandenen Kenntnisse).</p>
<p>Um gewerbliche Händler mit veralteten Designs unter Druck zu setzen werden Angebote mit Responsive Designs gegenüber starren Designs bevorzugt. Heißt: Angebote mit veralteten Designs landen in Rankings weiter hinten und werden von weniger Interesssenten gefunden.</p>
<p>Siehe zum Beispiel</p>
<p><a href="https://verkaeuferportal.ebay.de/verkaeufer-news/2016-fruehling/mobile-darstellung-angebote" rel="nofollow noopener noreferrer">Neue Ebay-Regeln ab / seit 2017</a></p>
<p>Eventuell auf den Button "Gewerblich" klicken. In dem Artikel wird auch näher erklärt, was Ebay unter aktiven Inhalten versteht.</p>
<p>Die Angabe</p>
<blockquote>
<p>verpönt hin oder her, es gibt alte Dokumente und Vorgaben, die erlauben es nicht anders</p>
</blockquote>
<p>ist aus Ebay-Sicht damit vollkommener Unsinn.</p>
<p>Gruss</p>
<p>MrMurphy</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715312#m1715312Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T10:51:33Z2018-03-07T10:51:33ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@iloveHTML</p>
<blockquote>
<p>Nun möchte ich nur EINE Tabelle […] als Zebrastreifentabelle formatieren.</p>
</blockquote>
<p>Im <em lang="en">A-List-Apart</em>-Artikel <a href="http://alistapart.com/article/web-typography-tables" lang="en" rel="nofollow noopener noreferrer">Web Typography: Designing Tables to be Read, Not Looked At</a> rät der Autor Richard Rutter im Abschnitt <a href="http://alistapart.com/article/web-typography-tables#section10" lang="en" rel="nofollow noopener noreferrer">Do not over-stylise tables</a> davon ab, Tabellenzeilen mit Hintergrundfarben zu versehen. Also auch <strong>keine Zebrastreifen zu verwenden</strong>, die keinen nennenswerten Vorteil bringen:</p>
<p><em>“This experiment yielded no evidence that zebra striping consistently improves the accuracy or speed of tasks. This would seem to suggest that we shouldn’t bother with zebra striping anymore.”</em><br>
—Jessica Enders, <a href="https://alistapart.com/article/zebrastripingdoesithelp" lang="en" rel="nofollow noopener noreferrer">Zebra Striping: Does it Really Help?</a>, Abschnitt <a href="https://alistapart.com/article/zebrastripingdoesithelp#section7" lang="en" rel="nofollow noopener noreferrer">So there’s no point in zebra striping?</a></p>
<p>Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715184#m1715184iloveHTML2018-03-06T12:30:03Z2018-03-06T12:32:34ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Henry,</p>
<p>verpönt hin oder her, es gibt alte Dokumente und Vorgaben, die erlauben es nicht anders</p>
<p>Vielleicht ist es am Anschauungsobjekt einfacher, die Versandkostentabelle ist aktuell
manuell eingefärbt, das soll überarbeitet werden</p>
<p>https://www.ebay.de/itm/Spannungswandler-220-110-Volt-Trafo-Transformator-Spannungsumformer-Umformer/183102676178?hash=item2aa1c51cd2:g:j9wAAOSwkjFalE9S</p>
<p>ID</p>
<p>was für eine ID ?</p>
<p><TABLE ID Zebra>
.
.
.
.</TABELE></p>
<p>?</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715317#m1715317Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T11:14:20Z2018-03-07T11:14:20ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Henry</p>
<blockquote>
<p>Indem du die gewünschte Tabelle identifizierst. Also zb. id="zebra" und dann das CSS nur darauf anwendest zb.
#zebra{...}</p>
</blockquote>
<p>"zebra" ist keine gute Bezeichnung zur <em>Identifikation</em> einer Tabelle. (Es sei denn, in deren Inhalt geht es um Zebras). Die ID sollte die Tabelle <em>inhaltlich</em> beschreiben; sowas wie bspw. "produkteigenschaften".</p>
<p>"zebra" wäre eine Bezeichnung für eine <em>Klasse</em>. Auch wenn das gegenwärtig(!) nicht gewünscht ist, es könnte ja mehrere solcher Tabellen geben. (<a href="https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715312#m1715312" rel="noopener noreferrer">Es sollte eher gar keine geben</a>, aber das ist eine andere Diskussion.)</p>
<p>Das wäre eine rein präsentationsbezogene Klasse – i.d.R. <em>bäh</em>, aber es mag Anwendungsfälle dafür geben. Also <code>class="zebra"</code> und das CSS nur darauf angewandt: <code>.zebra …</code></p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715188#m1715188iloveHTML2018-03-06T12:45:11Z2018-03-06T12:45:11ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Also ich habe der Tabelle jetzt DIV CLASS="zebra" zugewiesen und den Container eingebaut.</p>
<p>Dann die Formatierung in die Style Sektion am Anfang des Dokumentes eingefügt</p>
<p>Nichts funktioniert, es geht nicht</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715192#m1715192Henry2018-03-06T12:55:50Z2018-03-06T12:57:15ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<blockquote>
<p>Vielleicht ist es am Anschauungsobjekt einfacher, die Versandkostentabelle ist aktuell
manuell eingefärbt, das soll überarbeitet werden</p>
<p>https://www.ebay.de/itm/Spannungswandler-220-110-Volt-Trafo-Transformator-Spannungsumformer-Umformer/183102676178?hash=item2aa1c51cd2:g:j9wAAOSwkjFalE9S</p>
</blockquote>
<p>Wir reden hier also von Ebay? Und dort hast du Zugang zum Kopfbereich der Seite, bzw. darfst seperate Styleangaben zufügen. Wäre mir neu, habe aber lange dort nichts mehr gemacht.</p>
<p>Aber…</p>
<blockquote>
<p>ID</p>
<p>was für eine ID ?</p>
<p><TABLE ID Zebra>
.
.
.
.</TABELE></p>
<p>?</p>
</blockquote>
<p>ich seh schon, du hast noch nicht viel mit HTML zu tun gehabt. Daher mal:
<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-child#Tabelle_im_Zebralook" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-child#Tabelle_im_Zebralook</a></p>
<p>Aber das kennst du vermutlich schon, was du aber kennen solltest, wie man ein Element ansprechen kann:
<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Selektoren/ID-Selektor</a></p>
<p>oder grundsätzlich:
<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Selektoren</a></p>
<p>und natürlich nicht zu vergessen die Attribute:
<a href="https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute</a></p>
<p>Dann merkst du bald, dass du zb. <table id="zebra"> verwenden und dieses mit CSS auch ansprechen kannst.</p>
<p>zb.<br>
#zebra{background-Color:red;}</p>
<p>oder du willst die Zeilen darin ansprechen dann…</p>
<p>#zebra tr{background-Color:blue;}</p>
<p>Jetzt hast du aber vermutlich auch noch das Problem nicht in den Kopfbereich bei Ebay reinzukommen um dort Styleangaben zu machen. Da gäbe es normalerweise die Möglichkeit das direkt im Bodybereich zu bestimmen. bsp. <code><tr style="background-Color:#000;}"></code> Das bringt aber einen größeren Aufwand für deinen Zebralook. Alternativ gäbe es dann noch eine Möglichkeit über Javascript den Kopfbereich zu ändern, würde jetzt aber zu weit führen. Allerdings, ohne Gewähr, dürfte es auch funktionieren wenn du die Styleangabe im Bodybereich reinlegst, zwar nicht so vorgesehen, aber zur Not.</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715191#m1715191iloveHTML2018-03-06T12:53:44Z2018-03-06T14:08:35ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Nun habe ich es als ID versucht, geht ebenso nicht</p>
<p>Meine Zeile im Style</p>
<pre><code class="block language-css"><span class="token selector">#zebra</span> <span class="token punctuation">{</span><span class="token selector">tr:nth-child(even)</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #D4D4D4<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">tr:nth-child(odd)</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p>sämtliche Varianten mit umsetzenvon Semikolon, Klammer, geschweifte Klammer, Doppelpunkt führen zu dem gleichen Ergebnis</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715261#m1715261Robert B.2018-03-06T15:09:14Z2018-03-06T15:09:14ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo <a href="/users/7161" class="mention registered-user" rel="noopener noreferrer">@iloveHTML</a>,</p>
<blockquote>
<p>Meine Zeile im Style</p>
<pre><code class="block language-css"><span class="token selector">#zebra</span> <span class="token punctuation">{</span><span class="token selector">tr:nth-child(even)</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #D4D4D4<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">tr:nth-child(odd)</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
</blockquote>
<p>vielleicht solltest du deine Liebe auch auf CSS ausdehnen Dieser Schnipsel ist sinnloses und ungültiges CSS.</p>
<p>Viele Grüße<br>
Robert</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715194#m1715194iloveHTML2018-03-06T13:00:36Z2018-03-06T13:02:36ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Henry</p>
<p>dieses Template habe ich vor 10 Jahren geschrieben</p>
<p>der Unterschied von Class und ID ist mir schon klar</p>
<p>im Head stehen alle Style Angaben und die werden von eBay auch einwandfrei interpretiert</p>
<p>weder als Class, noch als ID funktioniert es nicht</p>
<p>wenn ich die Tabelle in einen DIV Container einfasse, MUSS es gehen, tut es nicht</p>
<p>ich vermute, es liegt ein Syntaxfehler in der Style Zeile vor, nur wo liegt er? Es muss ja alles von geschweiften Klammern eingeschlossen sein</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715198#m1715198Henry2018-03-06T13:06:36Z2018-03-06T13:06:36ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<blockquote>
<p>der Unterschied von Class und ID ist mir schon klar</p>
</blockquote>
<p>denke da fehlt noch mehr als der Unterschied…</p>
<p>Aber hier mal für dich (auf run klicken):
<a href="https://www.w3schools.com/code/tryit.asp?filename=FP4EE8AX04TB" rel="nofollow noopener noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FP4EE8AX04TB</a></p>
<p>Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715203#m1715203iloveHTML2018-03-06T13:09:51Z2018-03-06T14:09:14ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Alle diese Varianten funktionieren NICHT:</p>
<pre><code class="block language-css"><span class="token selector">#zebra</span> <span class="token punctuation">{</span><span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>odd<span class="token punctuation">)</span> <span class="token property">background−color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.zebra</span> <span class="token punctuation">{</span><span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>odd<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">#zebra</span> <span class="token punctuation">{</span><span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4 <span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>odd<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.zebra</span> <span class="token punctuation">{</span><span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4 <span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>odd<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p>Alles, was sonst noch umgesetzt werden kann von Klammern und Leerschritten, alles erfolglos</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715206#m1715206Rolf B2018-03-06T13:12:11Z2018-03-06T13:12:11ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<p>beschäftige Dich mal mit <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren" rel="nofollow noopener noreferrer">CSS Selektoren und Kombinatoren</a>, dann weißt Du wie man das richtig macht.</p>
<p>Die grundsätzliche Syntax einer CSS Regel ist</p>
<p>selektor { eigenschaften }.</p>
<p>Nur ein Paar geschweifter Klammern, mehr nicht. Geschachtelte geschweiften Klammern gibt es in CSS zwar auch, aber nur bei Gruppen von Regeln, die z.B. durch Media-Abfragen gebildet werden. Hier nicht.</p>
<p>Ein Selektor kann ein einfacher Selektor sein oder eine Art "Suchpfad", dann sind es mehrere einfache Selektoren, die jeden Schritt auf dem Pfad bestimmen, und dazwischen Kombinatoren, die die Art des Schrittes angeben.</p>
<p>Ein einfacher Selektor für Klassen ist ein Punkt, gefolgt vom Klassennamen.</p>
<p>Ein einfacher Selektor für IDs ist ein #, gefolgt von der ID</p>
<p>Ein einfacher Selektor, der nur aus Buchstaben besteht, findet HTML Elemente mit diesem Tag-Name. Das willst Du hier nicht.</p>
<p>Der einfachste Kombinator ist die Leerstelle, der „Nachfahren-Selektor“. Dann sucht er die Elemente, auf die der Selektor links davon passt, und dann DARIN nach Elementen, auf die der Selektor rechts davon passt.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715205#m1715205Tabellenkalk2018-03-06T13:12:02Z2018-03-06T13:12:02ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<p>Schau dir mal die <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator" rel="nofollow noopener noreferrer">Kombinatoren</a> an!</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715208#m1715208iloveHTML2018-03-06T13:12:26Z2018-03-06T13:14:25ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>So sieht die Style Sektion im Head aus, alles funktioniert, bis auf zebra</p>
<pre><code class="block language-css"><span class="token selector"><STYLE TYPE="text/css">
<!--
*</span><span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>10pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#000000<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.bullet</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 10pt<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.headline</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>arial<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>11pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#7F7F7F<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.sonderaktion</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>arial<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>10pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#FF9933<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.key</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>1pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.red</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>10pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#E60000<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.green</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>10pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#00BF54<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.templateversion</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>6pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#00009F<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.black</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>10pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#000000<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.desc_addon_1</span> <span class="token punctuation">{</span><span class="token property">font-family</span><span class="token punctuation">:</span>verdana<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>16pt<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#FFA800<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">#zebra</span> <span class="token punctuation">{</span><span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>odd<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
-->
</STYLE>
</code></pre>
<p>Die Darstellung hier ist natürlich eine Katastrophe</p>
<p>Edit Rolf B: Katastrophenhilfe geleistet</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715209#m1715209Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-06T13:12:46Z2018-03-06T13:12:46ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<blockquote>
<p>Alle diese Varianten funktionieren NICHT:</p>
</blockquote>
<p>Stimmt. Du hast schon Links zu den Grundlagen bekommen.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715210#m1715210iloveHTML2018-03-06T13:14:39Z2018-03-06T13:14:39ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Naja,</p>
<p>wenn es nicht geht, lasse ich es halt so</p>
<p>ich habe alle Kommata, Semikolon und geschweiften Klammern jetzt durch, funktioniert halt nicht</p>
<p>Was soll's</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715216#m1715216Regina Schaukrug2018-03-06T13:22:04Z2018-03-06T13:25:36ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Falsch:</p>
<pre><code class="block bad language-css"><span class="token selector">#zebra</span> <span class="token punctuation">{</span><span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>even<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token property">tr</span><span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>odd<span class="token punctuation">)</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p>Erst mal cool bleiben und schauen, was man will:</p>
<p>Die <code>tr</code> sind HTML-Elemente, welche in einer Tabelle mit der ID "zebra" auftreten und formatiert werden sollen.</p>
<p>Also:</p>
<pre><code class="block language-css"><span class="token selector">#zebra tr:nth-child(even)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#zebra tr:nth-child(odd)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
<p>Allerdings würde die ID für die Tabelle in eine Klasse ändern. Morgen kommt vielleicht noch eine Tabelle hinzu...</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715211#m1715211Tabellenkalk2018-03-06T13:15:44Z2018-03-06T13:15:44ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>wenn es nicht geht, lasse ich es halt so</p>
</blockquote>
<p>klar geht das!</p>
<blockquote>
<p>Was soll's</p>
</blockquote>
<p>wenn mans richtig macht…</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715213#m1715213Martl2018-03-06T13:19:32Z2018-03-06T13:19:32ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<p>um es einfacher auszudrücken:</p>
<pre><code class="block language-css"><span class="token selector">.zebra tr:nth-child(even)</span><span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.zebra tr:nth-child(odd)</span><span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
<p>Grüße, Martl</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715212#m1715212iloveHTML2018-03-06T13:18:22Z2018-03-06T13:18:22ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Kalk,</p>
<p>da ich jetzt alle Varianten in der Zeile für die Styleangabe durchhabe und es nicht funktinoiert, tja, was soll ich sagen.....</p>
<p>so viele Möglichkeiten, die Selektoren voneinander zu trennen gibt es ja nicht. Oder dürfen sie nicht in einer Zeile stehen, so wie es bei Javascript dann zu Problemen kommt?</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715214#m1715214iloveHTML2018-03-06T13:21:14Z2018-03-06T13:21:14ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Also zum Beispiel eine Zeile aus meinem Style</p>
<p>.red {font-family:verdana; font-size:10pt; color:#E60000; font-weight:bold;}</p>
<p>alle Anweisungen werden kombiniert ausugeführt
vor dem Doppelpunkt der Selektor, nach dem Doppelpunkt die Anweisung</p>
<p>was soll da in der zebra anweisung anders sein?</p>
<p>ist doch auch durch Semikolon getrennt, funktioniert halt nicht</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715215#m1715215iloveHTML2018-03-06T13:21:58Z2018-03-06T13:21:58ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hab ich auch schon ausprobiert, erfolglos</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715226#m1715226Tabellenkalk2018-03-06T13:37:42Z2018-03-06T13:37:42ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>vor dem Doppelpunkt der Selektor, nach dem Doppelpunkt die Anweisung</p>
</blockquote>
<p>Hier hast du ein Verständnisproblem: der/die Selektor/en befinden sich <em>vor</em> der öffnenden geschweiften Klammer. Vor dem Doppelpunkt findet sich die Eigenschaft, hinter dem Doppelpunkt der Wert.</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715217#m1715217Auge2018-03-06T13:25:38Z2018-03-06T13:25:38ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo</p>
<blockquote>
<p>Hab ich auch schon ausprobiert, erfolglos</p>
</blockquote>
<p>Wenn die tatsächlich richtige Variante bei dir nicht funktioniert, dann machst du etwas anderes falsch.</p>
<p>Tschö, Auge</p>
<div class="signature">-- <br>
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br>
Toller Dampf voraus von Terry Pratchett
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715219#m1715219Regina Schaukrug2018-03-06T13:26:37Z2018-03-06T13:27:41ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<blockquote>
<p>erfolglos</p>
</blockquote>
<p><a href="https://home.fastix.org/Tests/tabelle_getigert_js_auswahl.html" rel="nofollow noopener noreferrer">Das geht aber genau so!</a></p>
<p>Stichworte: Tippfehler, Cache?</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715224#m1715224Tabellenkalk2018-03-06T13:33:01Z2018-03-06T13:33:01ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>Hab ich auch schon ausprobiert, erfolglos</p>
</blockquote>
<p>hattes du aber nicht mit aufgelistet bei deinen erfolglosen Versuchen!</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715220#m1715220Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-06T13:27:24Z2018-03-06T13:27:24ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Auge,</p>
<blockquote>
<p>Wenn die tatsächlich richtige Variante bei dir nicht funktioniert, dann machst du etwas anderes falsch.</p>
</blockquote>
<p>oder ebay erlaubt keine style-Elemente.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715221#m1715221Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-06T13:27:46Z2018-03-06T13:27:46ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Regina Schaukrug,</p>
<blockquote>
<blockquote>
<p>erfolglos</p>
</blockquote>
<p>Tippfehler, Cache?</p>
</blockquote>
<p>ebay?</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715227#m1715227Henry2018-03-06T13:37:45Z2018-03-06T13:37:45ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Regina,</p>
<blockquote>
<p><a href="https://home.fastix.org/Tests/tabelle_getigert_js_auswahl.html" rel="nofollow noopener noreferrer">Das geht aber genau so!</a></p>
</blockquote>
<p>wie ich das immer hasse... nur mal am Rande. Muss jetzt wirklich schon so ein simples Beispielscript die Googlekrake bedienen. Nicht böse gemeint, ich versteh es nur nicht.</p>
<p><code> <link href='http://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'></code> Da hätte jetzt sans serif oder gar nichts auch gereicht. Bevor jetzt kommt, "geht mich nichts an", ja stimmt wollte es nur mal los werden.</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715322#m1715322Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T11:34:22Z2018-03-07T11:34:22ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Regina Schaukrug</p>
<blockquote>
<p><a href="https://home.fastix.org/Tests/tabelle_getigert_js_auswahl.html" rel="nofollow noopener noreferrer">Das geht aber genau so!</a></p>
</blockquote>
<p>Nein, genau so geht es <strong>nicht!</strong></p>
<p>Wobei „es“ nicht die Zebrastreifen meint, sondern die Interaktion. Die ist bei dir kaputt; mit Tastatur geht da gar nichts.</p>
<p>Kinder, wie oft muss man das denn noch wiederholen: <strong>Niemals nicht interaktive Elemente als <code>click</code>-Eventtarget verwenden!</strong></p>
<p>Interaktive Elemente sind: <code>a[href]</code>, <code>button</code> und einige andere. <code>tr</code> gehört nicht dazu.</p>
<p>Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715223#m1715223iloveHTML2018-03-06T13:30:05Z2018-03-06T13:31:40ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hm</p>
<p>ich schrieb ja bereits, daß alle Style Angaben von eBay umgesetzt werden, hatte ja den Link zu der Seite angegeben</p>
<p>ich geb es halt auf, funktioniert nicht und gut</p>
<p>ist ja jetzt auch nicht so wild</p>
<p>das Template steht ja schon seit Jahren, wollte mir nur zukünftig das manuelle Einfärben der Zeilen erstparen, aber die paar KB, die das Dokument dadurch grösser wird, so what</p>
<p>Trotzdem Danke für eure Unterstützung</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715225#m1715225Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-06T13:33:02Z2018-03-06T13:33:02ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<blockquote>
<p>ich schrieb ja bereits, daß alle Style Angaben von eBay umgesetzt werden, hatte ja den Link zu der Seite angegeben</p>
</blockquote>
<p>Du verwendest style-Attribute, keine style-Elemente.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715228#m1715228iloveHTML2018-03-06T13:39:25Z2018-03-06T13:39:25ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Nee, hab ich nicht aufgelistet</p>
<p>is ja jetzt auch egal</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715234#m1715234Rolf B2018-03-06T13:50:17Z2018-03-06T13:50:17ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<p>live per Chrome-Entwicklerwerkzeugen in deine Seite hineingefiddelt:</p>
<p><a href="/images/f4863872-ff50-4355-9716-44a47087fe25.png" rel="noopener noreferrer"><img src="/images/f4863872-ff50-4355-9716-44a47087fe25.png?size=medium" alt="" loading="lazy"></a></p>
<p>Noch Fragen?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715236#m1715236iloveHTML2018-03-06T13:53:54Z2018-03-06T14:12:15ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Regina</p>
<p>auch diese Variante, wie von Dir habe ich im Style ausprobiert</p>
<p>egal ob ich die Tabelle mit einer ID versehe, oder die Tabelle in einen DIV Container einschliesse, es funktioniert nicht</p>
<pre><code class="block language-css"><span class="token selector">#zebra tr:nth-child(even)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">#zebra tr:nth-child(odd)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
<p>habe ich genauso gemacht</p>
<p>alternavit als</p>
<pre><code class="block language-css"><span class="token selector">.zebra tr:nth-child(even)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#D4D4D4<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.zebra tr:nth-child(odd)</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFFFF<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
<p>Es geht nicht. Ich hab jetzt auch kein Interesse mehr daran, seid mir net böse, aber ich hab alle Varianten durch. Ich lass es jetzt so. Manche Dinge im Leben können einfach nicht erzwungen werden.</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715237#m1715237iloveHTML2018-03-06T14:00:43Z2018-03-06T14:00:43ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Du hast .foo definiert und jede zweite Zeile ist gelb hinterlegt</p>
<p>ändert nichts daran, daß es bei mir nicht funktioniert. Ich nutzte Firefox.</p>
<p>Der Beweis, daß meine Zeilen wie von Regina kopiert fehlerfrei sind ist darin zu sehen, daß die Syntax genau gleich ist, wie von Deiner .foo Definition</p>
<p>Ich dachte schon, daß es an der einleitenden und der hintangestellten Leerstelle in den geschweiften Klammern liegt, aber nein, das ist es auch nicht</p>
<p>also quälen wir uns nicht weiter rum</p>
<p>Macht euch bitte keine weitere Arbeit</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715239#m1715239Henry2018-03-06T14:03:15Z2018-03-06T14:03:15ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<blockquote>
<p>Es geht nicht. Ich hab jetzt auch kein Interesse mehr daran, seid mir net böse, aber ich hab alle Varianten durch. Ich lass es jetzt so. Manche Dinge im Leben können einfach nicht erzwungen werden.</p>
</blockquote>
<p>Geduld galt mal als Tugend. Du hast hier ungewöhnlich viele Antworten in sehr kurzer Zeit bekommen. Das bedeutet, die Leute hier haben sich bemüht <strong>Dir</strong> zu helfen. Und du benimmst dich, sorry muss ich jetzt mal so offen sagen, wie ein verzogenes kleines Kind.</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715242#m1715242iloveHTML2018-03-06T14:07:47Z2018-03-06T14:07:47ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Henry</p>
<p>ich habe mich ja auch für die Mithilfe bedankt und alle Lösungsvorschläge umgesetzt</p>
<p>es ändert eben nichts an dem Ergebnis</p>
<p>Ihr könnt da jetzt auch nichts mehr machen. Bei Rolf B hat es funktioniert, bei mir eben nicht</p>
<p>Er und ich haben den gleichen Quelltext</p>
<p>also, lasst es gut sein</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715245#m1715245Rolf B2018-03-06T14:14:12Z2018-03-06T14:14:12ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo iloveHTML,</p>
<p>Vorschlag: Bau's einfach mal "nicht funktionierend" ein und mach's in ebay aktiv, und ich schau mir dann an, wie es in Chrome aussieht… Ein Füxlein kann ich auch noch auftreiben.</p>
<p>Meine Vermutung: Irgend ein Detail hast Du anders verstanden als wir es gemeint haben.</p>
<p>Wäre doch schade, wenn Du aus dieser Diskussion hier nur Frust mitnehmen würdest.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715373#m1715373MrMurphy12018-03-07T23:55:27Z2018-03-07T23:55:27ZBeispiel Responsive<p>Hallo</p>
<p>Als Freund der Praxis habe ich aus dem Angebot von iloveHTML mal ein ebaykonformes responsives Beispielangebot erstellt. Mein Hauptgedanke ist dabei wie immer die Benutzerfreundlichkeit.</p>
<p><a href="http://boratb.bplaced.net/index011.html" rel="nofollow noopener noreferrer">Responsives Ebay Beispielangebot</a></p>
<p>Das main-Element enthält den gesamten HTML-Quelltext für ein konkretes Ebay-Angebot. Das CSS ist noch im head-Bereich ausgelagert. Die beiden Möglichkeiten für den Einbau bei Ebay habe ich aber im Quelltext des main-Elements vorgesehen.</p>
<p>Gruss</p>
<p>MrMurphy</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715318#m1715318Tabellenkalk2018-03-07T11:16:23Z2018-03-07T11:16:23ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.</p>
</blockquote>
<p>es kommt auf die Tabelle drauf an. Die um die es hier geht, ist ja eigentlich bloß ne Liste, bei der Zebrastreifen keinen Mehrwert haben. Ist die Tabelle dagegen vielspaltig, finde ich Zeilenfärbung hilfreich.</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715329#m1715329Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-07T12:17:23Z2018-03-07T12:17:23ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p>Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.</p>
</blockquote>
<p>Dezente Zebrastreifen tun das nicht, sondern sie führen das Auge in umfangreichen Tabellen.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715483#m1715483Schnabeltier2018-03-09T09:25:53Z2018-03-09T09:25:53ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hi,</p>
<blockquote>
<p>Im <em lang="en">A-List-Apart</em>-Artikel <a href="http://alistapart.com/article/web-typography-tables" lang="en" rel="nofollow noopener noreferrer">Web Typography: Designing Tables to be Read, Not Looked At</a> rät der Autor Richard Rutter im Abschnitt <a href="http://alistapart.com/article/web-typography-tables#section10" lang="en" rel="nofollow noopener noreferrer">Do not over-stylise tables</a> davon ab, Tabellenzeilen mit Hintergrundfarben zu versehen. Also auch <strong>keine Zebrastreifen zu verwenden</strong>, die keinen nennenswerten Vorteil bringen:</p>
</blockquote>
<p>Lustigerweise verwendet er sie selbst in den meisten Beispielen in den anderen Abschnitten. Und das ist auch gut so, denn die wären sonst schwerer zu lesen, weil er auch keine borders verwendet.</p>
<p>Auch dem empfohlenen Verzicht auf vertikale Linien stimme ich nicht zu ("Tables without vertical rules look better."). Die Tabelle mit den Video-Standards ist absolut furchtbar zu lesen, weil diese fehlen (und weil zusammenhängende Daten über mehrere Zellen verteilt sind um das Alignment zu erreichen, obwohl er im Text nur von CSS spricht und den Fallback, den er selbst verwendet, gar nicht erwähnt).</p>
<p>Im letzten Absatz zeigt er eine Tabelle, die tatsächlich "ohne alles" am besten aussieht. Bei der bilden die einzelnen Datenzellen auch hinreichend einheitliche optische Blöcke, worauf ich mich im allgemeinen eher nicht verlassen würde.</p>
<p>Insgesamt muss ich sagen, dass ich von alistapart bessere Artikel gewohnt bin ...</p>
<blockquote>
<p><em>“This experiment yielded no evidence that zebra striping consistently improves the accuracy or speed of tasks. This would seem to suggest that we shouldn’t bother with zebra striping anymore.”</em><br>
—Jessica Enders, <a href="https://alistapart.com/article/zebrastripingdoesithelp" lang="en" rel="nofollow noopener noreferrer">Zebra Striping: Does it Really Help?</a>, Abschnitt <a href="https://alistapart.com/article/zebrastripingdoesithelp#section7" lang="en" rel="nofollow noopener noreferrer">So there’s no point in zebra striping?</a></p>
</blockquote>
<p>Und das ist schon etwas aus dem Kontext gerissen (und die Formulierung "would seem" kündigt auch schon ein großes Aber an). Weiter schreibt sie nämlich, dass aus der Studie keine klare Empfehlung folgt, weil die Streifen vielen Leuten gefallen und die Lesbarkeit für niemanden verschlechtern.</p>
<p>Ich finde Tabellen mit Streifen auch besser zu lesen, aus dem gleichen Grund wie <a href="https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715323#m1715323" rel="noopener noreferrer">Tabellenkalk</a>. Vor allem, wenn ich quer scrollen muss.</p>
<p>Viele Grüße vom Schnabeltier</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715327#m1715327Henry2018-03-07T12:09:44Z2018-03-07T12:12:12ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Gunnar,</p>
<blockquote>
<p>"zebra" ist keine gute Bezeichnung zur <em>Identifikation</em> einer Tabelle. (Es sei denn, in deren Inhalt geht es um Zebras). Die ID sollte die Tabelle <em>inhaltlich</em> beschreiben; sowas wie bspw. "produkteigenschaften".</p>
</blockquote>
<p>Warum?</p>
<blockquote>
<p>"zebra" wäre eine Bezeichnung für eine <em>Klasse</em>. Auch wenn das gegenwärtig(!) nicht gewünscht ist, es könnte ja mehrere solcher Tabellen geben. (<a href="https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715312#m1715312" rel="noopener noreferrer">Es sollte eher gar keine geben</a>, aber das ist eine andere Diskussion.)</p>
</blockquote>
<p>Ja und ich schrieb …Tabelle identifizieren durch zb,... Dass die Identifizierung durch Klassen, Selektoren, etc. möglich ist, dürfte klar sein. Da es hier in der Frage aber konkret um eine einzige Tabelle ging, finde ich ID als Primärlösung durchaus geeignet, insbesondere auch weil damit gleichzeitig als Sprungmarke geeignet ist.</p>
<blockquote>
<p>Das wäre eine rein präsentationsbezogene Klasse – i.d.R. <em>bäh</em>, aber es mag Anwendungsfälle dafür geben. Also <code>class="zebra"</code> und das CSS nur darauf angewandt: <code>.zebra …</code></p>
</blockquote>
<p>Sehe da immer noch keine echte Notwendigkeit, das anders anzugehen.</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715321#m1715321Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T11:26:30Z2018-03-07T11:26:30ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Tabellenkalk</p>
<blockquote>
<p>Ist die Tabelle dagegen vielspaltig, finde ich Zeilenfärbung hilfreich.</p>
</blockquote>
<p>Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715323#m1715323Tabellenkalk2018-03-07T11:40:53Z2018-03-07T11:40:53ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?</p>
</blockquote>
<p>Wenn man vom Anfang der Zeile rüber zum Ende springt, ist es einfacher, in der richtigen Zeile zu bleiben. Trennlinien trennen jede Zeile, sagen mir aber nicht, ob es die richtige war.<br>
Seh ich am Anfang den farbig hinterlegten Eintrag, weiß ich, ich darf am Ende nicht die weiße Zeile auslesen…</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715324#m1715324beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-03-07T11:46:04Z2018-03-07T11:46:04ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>hallo</p>
<blockquote>
<p>@@Tabellenkalk</p>
<blockquote>
<p>Ist die Tabelle dagegen vielspaltig, finde ich Zeilenfärbung hilfreich.</p>
</blockquote>
<p>Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?</p>
<h3>LLAP </h3><p><em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann</p>
</blockquote>
<p>Ich denke, die Idee der Zebrastreifen stammt aus einer Zeit der statischen Dokumente.
Im interaktiven Design gibt es immer bessere Lösungen als lange Tabellenzeilen.</p>
<p>Ich weiss aber, dass mein Finanzbeamter definitiv klare Trennlinien in PDF-Tabellen bevorzugt, und kein Fan von Farben ist.</p>
<p>Im interaktiven Design darf man sich auch überlegen, den Inhalt (potentiell umfangreicher) Tabellenzeile per Button als Liste in einem Popup zu präsentieren.</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715330#m1715330Henry2018-03-07T12:24:15Z2018-03-07T12:24:15ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Gunnar,</p>
<blockquote>
<p>Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?</p>
</blockquote>
<p>Es sieht ästhetischer aus. Aber das Thema Design hatten wir ja schon mal… </p>
<p>Was <a href="http://alistapart.com/article/web-typography-tables#section10" rel="nofollow noopener noreferrer">deinen Link</a> betrifft, so schreibt er doch nur, wenn ich es richtig verstanden habe, dass man es nicht übertreiben sollte und am Ende die Tabelle wie ein Spreadsheet aussieht. Zumal er ja bei seinen Tabellen ebenfalls Zebradesign wählt, was sagst du denn dazu?</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715439#m1715439Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-08T17:31:48Z2018-03-08T17:47:54ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Gunnar Bittersmann</p>
<blockquote>
<p>Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.</p>
</blockquote>
<p>Das ist gar nicht so schwer. Füge in die jeweils letzte Zelle jeder Spalte einen Button ein:<br>
<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</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>showSelected<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>button</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ausgewählt<span class="token punctuation">"</span></span> <span class="token attr-name">aria-pressed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<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>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span></code></p>
<p>(in der Zeile <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</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>gewaehlt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> mit <code>aria-pressed="true"</code>)</p>
<p>Statt für <code class="language-css">td.showSelected</code> die Stile dann für <code class="language-css">td.showSelected > button</code> und wenn du magst, Rahmen, Padding und Hintergrund weg:</p>
<pre><code class="block language-css"> <span class="token selector">.tiger tbody tr td.showSelected > button</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">.tiger tbody tr td.showSelected > button::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"⦙⦙⦙⦙"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">⋮
.tiger tbody tr.gewaehlt td.showSelected > button::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
<p>Den Fabwechsel bei <code class="language-css"><span class="token punctuation">:</span>hover</code> auch für Tastatursteuerung, d.h. für <code class="language-css"><span class="token punctuation">:</span>focus-within</code>, also die Selektoren ergänzen:</p>
<pre><code class="block language-css"> <span class="token selector">.tiger tbody tr:hover, .tiger tbody tr:focus-within</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#efe<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">⋮
.tiger tbody tr.gewaehlt:hover, .tiger tbody tr.gewaehlt:focus-within</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#fdb<span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
<p></p>
<p>Im JavaScript kannst du fast alles so lassen; EventListener auf <code>tr</code> kann ja so bleiben <em lang="en">(event delegation)</em>. Natürlich sollen Mausnutzer auch weiterhin auf die gesamte Fläche der Zeile clicken können.</p>
<p>Zusätzlich zur Klasse der Zeile ist lediglich noch das <code>aria-pressed</code>-Attribut umzuschalten, damit das ein funktionierender <a href="https://inclusive-components.design/toggle-button/" rel="noopener noreferrer">Toggle-Button</a> ist. Hinzugefügt:</p>
<ul>
<li>
<p><code class="language-js"><span class="token keyword">var</span> button <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'td.showSelected > button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p>
</li>
<li>
<p><code class="language-js">button<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'aria-pressed'</span><span class="token punctuation">,</span> <span class="token string">'false'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code> im THEN-Zweig</p>
</li>
<li>
<p><code class="language-js">button<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'aria-pressed'</span><span class="token punctuation">,</span> <span class="token string">'true'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code> im ELSE-Zweig</p>
</li>
</ul>
<p></p>
<p>Das war’s dann auch schon. ☞ <a href="https://bittersmann.de/test/tabelle_getigert_js_auswahl.html" rel="nofollow noopener noreferrer">anzusehen</a></p>
<p>(Stillschweigend berichtigt: Leerzeichen weg bei <code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span></code>, <code>/</code> rein bei <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></code>.)</p>
<p></p>
<p>Da gibt’s natürlich noch Verbesserungspotential:</p>
<ul>
<li>
<p>Elemente nicht im Eventhandler jedesmal neu im DOM suchen, sondern initial und in Variablen ablegen.</p>
</li>
<li>
<p>Klassen nicht per <code class="language-js">className</code> umschalten (was sowieso keine gute Idee ist, wenn noch andere Klassen im Spiel sind, die nicht geändert werden sollen), sondern mit dem <a href="https://developer.mozilla.org/docs/Web/API/Element/classList" rel="nofollow noopener noreferrer"><code class="language-js">classList</code>-Objekt</a>, welches auch eine Methode <code class="language-js"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> bietet.</p>
</li>
<li>
<p><strong>[Nachtrag]</strong> nicht für jede Tabellenzeile einen EventListener, sondern einen für die ganze Tabelle <em lang="en">(event delegation)</em>.</p>
</li>
<li>
<p><strong>[Nachtrag]</strong> <code>button::after</code> nicht in Abhängigkeit von <code>class="gewaehlt"</code> des <code>tr</code>-Vorfahren stylen, sondern in Abhängigkeit von seinem eigenen <code>aria-pressed</code>-Attribut, d.h.</p>
<pre><code class="block language-CSS"> <span class="token selector">button[aria-pressed="false"]::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"⦙⦙⦙⦙"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token selector">button[aria-pressed="true"]::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
</code></pre>
</li>
</ul>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715326#m1715326beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-03-07T12:04:36Z2018-03-07T12:04:36ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>hallo</p>
<blockquote>
<blockquote>
<p>Warum? Welchen Mehrwert bringt die Farbe, den horizontale Trennlinien nicht schon bieten?</p>
</blockquote>
<p>Wenn man vom Anfang der Zeile rüber zum Ende springt, ist es einfacher, in der richtigen Zeile zu bleiben. Trennlinien trennen jede Zeile, sagen mir aber nicht, ob es die richtige war.<br>
Seh ich am Anfang den farbig hinterlegten Eintrag, weiß ich, ich darf am Ende nicht die weiße Zeile auslesen…</p>
</blockquote>
<p>Noch einfacher wäre es, auf Verlangen eine Liste eines Datensatzes zu präsentieren, falls der Kontext dies erlaubt.</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715328#m1715328Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-07T12:15:59Z2018-03-07T12:15:59ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Henry,</p>
<p>HTML beschreibt, <strong>was</strong> es ist, nicht, wie es aussehen soll.</p>
<p>Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID <em>Produktbeschreibung</em> erkennen, dass das entsprechende Element eine Produktbeschreibung enthält.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715331#m1715331Henry2018-03-07T12:35:58Z2018-03-07T12:35:58ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Matthias,</p>
<blockquote>
<p>HTML beschreibt, <strong>was</strong> es ist, nicht, wie es aussehen soll.</p>
</blockquote>
<p>Ok.</p>
<blockquote>
<p>Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID <em>Produktbeschreibung</em> erkennen, dass das entsprechende Element eine Produktbeschreibung enthält.</p>
</blockquote>
<p>Dann wäre also Gunnars Ansicht "als id kein Zebra, als Klasse schon" demnach auch nicht sinnvoll?</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715338#m1715338beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-03-07T12:53:14Z2018-03-07T12:53:14ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<blockquote>
<p>Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel -</p>
</blockquote>
<p>In welcher Welt lebe ich …</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715341#m1715341Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T13:02:36Z2018-03-07T13:02:36ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Matthias Apsel</p>
<blockquote>
<p>Jemand der maschinell den Quelltext liest - Suchmaschinen zum Beispiel - kann anhand der Klasse oder ID <em>Produktbeschreibung</em> erkennen, dass das entsprechende Element eine Produktbeschreibung enthält.</p>
</blockquote>
<p>Nein, ich glaube nicht, dass eine Suchmaschine der Benennung einer ID oder Klasse eine Bedeutung zumisst. Es sei denn, es wären der Suchmaschine bekannte <a href="http://microformats.org/" rel="nofollow noopener noreferrer">Microformat</a>-Bezeichner:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>h-product<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>div</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>p-name<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>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>e-description<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>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>Ansonsten geht Maschinenlesbarkeit so:</p>
<pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">vocab</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://schema.org/<span class="token punctuation">"</span></span> <span class="token attr-name">typeof</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Product<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>div</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<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>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<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>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715363#m1715363Gleiter2018-03-07T18:21:00Z2018-03-07T18:21:00ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Nicht, wenn es um Zebras geht.</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715337#m1715337Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T12:52:55Z2018-03-07T12:52:55ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Matthias Apsel</p>
<blockquote>
<blockquote>
<p>Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.</p>
</blockquote>
<p>Dezente Zebrastreifen tun das nicht, sondern sie führen das Auge in umfangreichen Tabellen.</p>
</blockquote>
<p>Auch dezente Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar. (Es sei denn, sie wären sooo dezent … dass sie gar keine Zebrastreifen mehr wären.)</p>
<p>Auch bei weiß und sehr hellem Blau könnte man sich fragen, warum manche Zeilen blau <em>hervorgehoben</em> sind.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715333#m1715333Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-07T12:38:02Z2018-03-07T12:38:02ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Henry,</p>
<blockquote>
<p>Dann wäre also Gunnars Ansicht "als id kein Zebra, als Klasse schon" demnach auch nicht sinnvoll?</p>
</blockquote>
<p>Nein, denn das wäre ein präsentationsbezogener Klassenbezeichner. Den kann man verwenden, wenn es keinen inhaltlichen Grund für die vorgenommene Gestaltung gibt.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715336#m1715336Henry2018-03-07T12:49:50Z2018-03-07T12:49:50ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Matthias,</p>
<blockquote>
<blockquote>
<p>Dann wäre also Gunnars Ansicht "als id kein Zebra, als Klasse schon" demnach auch nicht sinnvoll?</p>
</blockquote>
<p>Nein, denn das wäre ein präsentationsbezogener Klassenbezeichner. Den kann man verwenden, wenn es keinen inhaltlichen Grund für die vorgenommene Gestaltung gibt.</p>
</blockquote>
<p>Jetzt bin ich verwirrt. Du schreibst "… Suchmaschinen zum Beispiel - kann anhand der <strong>Klasse oder ID</strong> Produktbeschreibung erkennen…"</p>
<p>Also woran erkennt eine Suchmaschine, wenn ich <xy class="zebra">…</xy>, ob ich das präsentationsbezogen meine oder inhaltlich? Entweder ist class="zebra" falsch, wie du schreibst, oder richtig, wie Gunnar schreibt. Deshalb verwirrt mich deine Aussage.</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715347#m1715347Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-07T14:27:01Z2018-03-07T14:27:01ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Henry,</p>
<blockquote>
<p>Jetzt bin ich verwirrt. Du schreibst "… Suchmaschinen zum Beispiel - kann anhand der <strong>Klasse oder ID</strong> Produktbeschreibung erkennen…"</p>
<p>Also woran erkennt eine Suchmaschine, wenn ich <xy class="zebra">…</xy>, ob ich das präsentationsbezogen meine oder inhaltlich? Entweder ist class="zebra" falsch, wie du schreibst, oder richtig, wie Gunnar schreibt. Deshalb verwirrt mich deine Aussage.</p>
</blockquote>
<p>Suchmaschinen oder andere Programme, die den Quelltext einer Seite analysieren, „denken“ nicht präsentationsbezogen. Wenn sie eine Klasse <em>Produktbeschreibung</em> finden, gehen sie davon aus, dass da eine Produktbeschreibung drin ist. Finden sie eine Klasse <em>zebra</em>, gehen sie davon aus, dass es im Element um Zebras geht.</p>
<p>Deshalb auch <code>class="error"</code> statt <code class="language-html bad">class="großer_roter_Text"</code>.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715340#m1715340Tabellenkalk2018-03-07T13:01:56Z2018-03-07T13:01:56ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>Auch bei weiß und sehr hellem Blau könnte man sich fragen, warum manche Zeilen blau <em>hervorgehoben</em> sind.</p>
</blockquote>
<p>Und die Antwort darauf wäre: Bessere Orientierung für den Nutzer.</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715349#m1715349Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-07T14:31:47Z2018-03-07T14:31:47ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<blockquote>
<blockquote>
<p>Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar, heben also manche gegenüber anderen unberechtigt hervor. Sollte man sich überlegen, ob man das will.</p>
</blockquote>
<p>Dezente Zebrastreifen tun das nicht, sondern sie führen das Auge in umfangreichen Tabellen.</p>
</blockquote>
<p>Auch dezente Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar. (Es sei denn, sie wären sooo dezent … dass sie gar keine Zebrastreifen mehr wären.)</p>
</blockquote>
<p>Ja, sie stellen Sie unterschiedlich dar. Ja, sie heben manche gegenüber anderen hervor. Aber sie heben andere auch gegenüber manchen hervor.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715655#m1715655Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-10T07:07:31Z2018-03-10T07:07:31ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p>Auch dezente Zebrastreifen stellen gleichberechtigte Inhalte unterschiedlich dar. (Es sei denn, sie wären sooo dezent … dass sie gar keine Zebrastreifen mehr wären.)</p>
</blockquote>
<p>Bei meiner (gedruckten) TAN-Liste in Tabellenform („Geben Sie bitte die TAN <strong>R1</strong> ein“) möchte ich auf die gar nicht so dezenten Zebrastreifen nicht verzichten.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715342#m1715342beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-03-07T13:08:00Z2018-03-07T13:08:00ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>hallo</p>
<blockquote>
<blockquote>
<p>Auch bei weiß und sehr hellem Blau könnte man sich fragen, warum manche Zeilen blau <em>hervorgehoben</em> sind.</p>
</blockquote>
<p>Und die Antwort darauf wäre: Bessere Orientierung für den Nutzer.</p>
</blockquote>
<p>Der Nutzen von Tabellen verlangt aber die Implementation des Moduls Autismus.</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715343#m1715343Tabellenkalk2018-03-07T13:10:29Z2018-03-07T13:10:29ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo,</p>
<blockquote>
<p>Der Nutzen von Tabellen verlangt aber die Implementation des Moduls Autismus.</p>
</blockquote>
<p>Nein</p>
<p>Gruß<br>
Kalk</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715348#m1715348Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T14:30:53Z2018-03-07T14:30:53ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Matthias Apsel</p>
<blockquote>
<p>Suchmaschinen oder andere Programme, die den Quelltext einer Seite analysieren, „denken“ nicht präsentationsbezogen. Wenn sie eine Klasse <em>Produktbeschreibung</em> finden, gehen sie davon aus, dass da eine Produktbeschreibung drin ist. Finden sie eine Klasse <em>zebra</em>, gehen sie davon aus, dass es im Element um Zebras geht.</p>
</blockquote>
<p><a href="https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715341#m1715341" rel="noopener noreferrer">Wie gesagt</a> glaube ich nichts davon.</p>
<blockquote>
<p>Deshalb auch <code>class="error"</code> statt <code class="language-html bad">class="großer_roter_Text"</code>.</p>
</blockquote>
<p>Nicht deshalb, aber dennoch.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715351#m1715351beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-03-07T14:54:29Z2018-03-07T14:54:29ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>hallo</p>
<blockquote>
<p>Suchmaschinen oder andere Programme, die den Quelltext einer Seite analysieren, „denken“ nicht präsentationsbezogen. Wenn sie eine Klasse <em>Produktbeschreibung</em> finden, gehen sie davon aus, dass da eine Produktbeschreibung drin ist. Finden sie eine Klasse <em>zebra</em>, gehen sie davon aus, dass es im Element um Zebras geht.</p>
</blockquote>
<p>Ich überlege jetzt noch, welchen Teil deiner Antwort ich als Zitat vorschlagen soll.</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715353#m1715353Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-07T15:34:41Z2018-03-07T15:35:05ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>Hallo Gunnar Bittersmann,</p>
<blockquote>
<p><a href="https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715341#m1715341" rel="noopener noreferrer">Wie gesagt</a> glaube ich nichts davon.</p>
</blockquote>
<p>Für word-Dokumente wollen wir genau sowas umsetzen. <a href="https://forum.selfhtml.org/m1703108" rel="noopener noreferrer">Reginas Vorschlag</a> scheint zielführend. Natürlich könnte man auch mit x-beliebigen (ge-uglyfier-ten) Klassenbezeichnern arbeiten, aber es ist viel klüger, die Klassen nach dem Inhalt zu benennen.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715358#m1715358Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-07T15:56:16Z2018-03-07T15:56:16ZCSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden<p>@@Matthias Apsel</p>
<blockquote>
<p>aber es ist viel klüger, die Klassen nach dem Inhalt zu benennen.</p>
</blockquote>
<p>Natürlich ist es das. Ich halte es nur nicht für klug, das mit Suchmaschinen begründen zu wollen.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715455#m1715455Henry2018-03-09T00:48:43Z2018-03-09T00:48:43ZExterner Google Font Sicherheitshinweis<p>Hallo Gunnar,</p>
<blockquote>
<p>Das war’s dann auch schon. ☞ <a href="https://bittersmann.de/test/tabelle_getigert_js_auswahl.html" rel="nofollow noopener noreferrer">anzusehen</a></p>
</blockquote>
<p>Ich hatte ja schon mal erwähnt, was ich von externen Googlefonteinbindungen halte, aber das ist subjektiv. Objektiv allerdings, habe ich eine Frage dazu. Ich bekomme bei dieser Einbindung oft(seltsamerweise nur bei Google Fonts und auch nicht immer) eine Sicherheitswarnung:</p>
<p><a href="/images/942810ca-31a4-4a9a-9225-24b8c7cd3103.png" rel="noopener noreferrer"><img src="/images/942810ca-31a4-4a9a-9225-24b8c7cd3103.png?size=medium" alt="" loading="lazy"></a></p>
<p>Im Entwicklerwerkzeug steht dann auch:</p>
<p><a href="/images/b8cf78b9-85ef-4c85-bf70-75203b0915c4.png" rel="noopener noreferrer"><img src="/images/b8cf78b9-85ef-4c85-bf70-75203b0915c4.png?size=medium" alt="" loading="lazy"></a></p>
<p>Ich komme nur leider nicht dahinter, weshalb genau und warum auch nicht immer(bzw. bei Seiten wo es auftritt schon immer, nur eben nicht bei jeder Seite die das einbindet). Klar wenn ich die Font runterlade seh ich natürlich nichts Aufälliges, aber da so ein Link natürlich auch auf normalem Weg anderes(als nur ein Font) einschleusen/ausführen könnte, wüsste ich gern wie ich das prüfen könnte. Vorschlag?</p>
<p>Gruss<br>
Henry</p>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715456#m1715456Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2018-03-09T05:24:50Z2018-03-09T05:24:50ZExterner Google Font Sicherheitshinweis<p>@@Henry</p>
<blockquote>
<p>Ich hatte ja schon mal erwähnt, was ich von externen Googlefonteinbindungen halte</p>
</blockquote>
<p>Oops, da hatte ich gar nicht hingesehen. Ich halte davon auch nicht viel.</p>
<p>Ist in meinem Beispiel raus. Wer Roboto nicht lokal installiert hat<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>, bekommt das jetzt in seiner serifenlosen Schrift (Helvetica, Arial, …) zu sehen.</p>
<p>Wer das Problem<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> weiter nachvollziehen möchte, muss das anhand <a href="https://home.fastix.org/Tests/tabelle_getigert_js_auswahl.html" rel="nofollow noopener noreferrer">Reginas Vorlage</a> tun.</p>
<p>LLAP </p>
<div class="signature">-- <br>
<em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann
</div>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Kann man durchaus machen; ist ja eine schöne Schrift. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>Was wohl daher rührt, dass die Schrift per HTTP geholt wird und nicht per HTTPS? <a href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715460#m1715460Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2018-03-09T07:20:41Z2018-03-09T07:20:41ZExterner Google Font Sicherheitshinweis<p>Hallo Henry,</p>
<blockquote>
<p><a href="/images/b8cf78b9-85ef-4c85-bf70-75203b0915c4.png" rel="noopener noreferrer"><img src="/images/b8cf78b9-85ef-4c85-bf70-75203b0915c4.png?size=medium" alt="" loading="lazy"></a></p>
<p>Ich komme nur leider nicht dahinter, weshalb genau und warum auch nicht immer</p>
</blockquote>
<p>Weil manche Einbindungen über HTTPS erfolgen und andere nicht.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/mar/6/css-pseudoklasse-auf-eine-bestimmte-tabelle-anwenden-wenn-mehrere-tabellen-im-dokument-vorhanden/1715466#m1715466Henry2018-03-09T08:03:37Z2018-03-09T08:03:37ZExterner Google Font Sicherheitshinweis<p>Hallo Gunnar,</p>
<blockquote></blockquote>
<p>ach klar, peinlich Danke. Noch zum 2. Teil meiner Frage(habe die blöd formuliert), weiß nicht ob ich das richtig sehe(weil noch nicht getestet), könnte Google(nur theoretisch), mal abgesehen vom Scanning, von dort aus beliebig ins Dom eingreifen und manipulieren, oder ist das speziell geschützt beim Browser?</p>
<p>Gruss<br>
Henry</p>