nicht angemeldet
Ausgehend von eingebettetem Element auf nächstes Kind zugreifen
Gunnar Bittersmann
Matthias Apsel
AugeGuten Abend,
ich habe folgende HTML-Struktur:
<table cellspacing="0">
<tbody>
<tr>
<td class="label">
<input id="auswahl1" type="radio" name="auswahl" />
<label for="auswahl1">L<br>I<br>V<br>E</label>
</td>
<td>
... Inhalt 1 ...
</td>
<td class="label">
<input id="auswahl2" type="radio" name="auswahl" />
<label for="auswahl2">P<br>R<br>O<br>M<br>O</label>
</td>
<td>
... Inhalt 2 ...
</td>
...
</tr>
</tbody>
</table>
<input type="button" value=" drucken " onclick="...">
Ich gebe hier verschiedene Daten aus und möchte über CSS bei angeklicktem Label (und dem damit markierten Radiobutton) die nachfolgende Zelle mit einer Hintergrundfarbe versehen. Ich möchte so die Daten farblich hervorheben, die beim späteren Klick auf den Button "drucken" ausgedruckt werden.
Problem scheint zu sein, dass ich in der CSS-Datei vom Selektor [type=radio]:checked ausgehen muss und dieser ja in eine Tabellenzelle eingebunden ist.
Der Kind-, Nachfahren-, Nachbar- und Geschwisterselektor scheinen diese "Barriere" nicht überwinden zu können.
Gibt es keine Lösung über CSS?
Vielen Dank und Gruß, Enrico
-
Hallo,
ich habe mein Vorhaben nun doch über JavaScript gelöst, weil noch keine parent-Selektoren eingeführt wurden und ich nur nach unten kaskadieren kann.
Gruß Enrico
-
Hallo,
Genau. Es gibt keine Rückwärts-Selektoren, man kann nicht hoch zum Elternelement gehen. Das ist aus Gründen der Performance so.
Da ich meine Antwort schon erstellt hatte, poste ich Sie, vielleicht ist es für Dich doch noch brauchbar:
HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css">.rot {color:red;}</style> <title>Beispiel</title> </head> <body> <table id="selectstuff" cellspacing="0"> <tbody> <tr> <td class="label"> <input id="auswahl1" type="radio" name="auswahl" /> <label for="auswahl1">L<br>I<br>V<br>E</label> </td> <td> ... Inhalt 1 ... </td> <td class="label"> <input id="auswahl2" type="radio" name="auswahl" /> <label for="auswahl2">P<br>R<br>O<br>M<br>O</label> </td> <td> ... Inhalt 2 ... </td> ... </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="highlight.js"></script> </body> </html>Javascript (highlight.js), Ich verwende JQuery:
(function() { $(document).ready(function(){ var radiobuttons = $("#selectstuff input[type='radio']"); radiobuttons.change(function() { radiobuttons.each(function(){ var button = $(this); if (button.is(':checked')) { button.parent().next().addClass("rot"); } else { button.parent().next().removeClass("rot"); } }); }); }); })();Gruß, Leander
-
-
Haste natürlich recht. Ist mir vor lauter Javascripteln doch entgangen, semantische Namen zu verwenden. Ich würde also besser 'hervorgehoben' oder 'selektiert' statt 'rot' als Name der CSS-Klasse nehmen.
Gruß, Leander
-
Hallo Leander,
Haste natürlich recht. Ist mir vor lauter Javascripteln doch entgangen, semantische Namen zu verwenden. Ich würde also besser 'hervorgehoben' oder 'selektiert' statt 'rot' als Name der CSS-Klasse nehmen.
Es gibt keine CSS-Klassen ;-p
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
@@Matthias Apsel
Es gibt keine CSS-Klassen ;-p
-
Du meinst „Glosse“, nicht „Glossar“?
-
Cheatah fehlt hier.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar Bittersmann,
- Cheatah fehlt hier.
Zitat im neuen Gewand: https://forum.selfhtml.org/cites/1698 Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Obwohl, die knapp 2000 kann man auch per Hand eintragen. Wo ist der Praktikant? ;-)
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
@@Matthias Apsel
Zitat im neuen Gewand: https://forum.selfhtml.org/cites/1698 Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Leider hat das neue Gewand keine Suche, sodass man das nicht einfach nutzen kann.
Obwohl, die knapp 2000 kann man auch per Hand eintragen. Wo ist der Praktikant? ;-)
Oder wo ist der Programmierer, der die Zitatesammlung so schreibt, dass die alten Nummern erhalten bleiben? ;-)
Warum sind die eigentlich anders?
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar Bittersmann,
Zitat im neuen Gewand: https://forum.selfhtml.org/cites/1698 Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Leider hat das neue Gewand keine Suche, sodass man das nicht einfach nutzen kann.
Dafür gibt es aber eine Suche, in der man auch nach diesen Gewändern suchen kann. https://forum.selfhtml.org/search
Oder wo ist der Programmierer, der die Zitatesammlung so schreibt, dass die alten Nummern erhalten bleiben? ;-)
Warum sind die eigentlich anders?
Du hattest diese Frage schon gestellt.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
@@Matthias Apsel
Warum sind die eigentlich anders?
Du hattest diese Frage schon gestellt.
Sie wurde aber nicht beantwortet.
Aber zumindest werden „[d]ie alten Links […] auf die neuen umgeleitet werden, die alte ID habe ich auch gespeichert.“ (CK)
Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Das wäre also auch geklärt.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
@@Matthias Apsel
Dafür gibt es aber eine Suche, in der man auch nach diesen Gewändern suchen kann. https://forum.selfhtml.org/search
Die Seite ist nirgens verlinkt?
Man kommt erst drauf, nachdem man erzwungendermaßen eine erfolglose Suche abgesetzt hat? Und muss dann auch noch wissen, dass es dort auf der Suchergebnisseite ein Häkchen gibt …?
Nutzerfreundlich ist anders.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar Bittersmann,
Die Seite ist nirgens verlinkt?
Es wäre in der Tat keine schlechte Idee, wenn man in den Quicklinks einen Link zur Suche unterbrächte.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Matthias Apsel,
Es wäre in der Tat keine schlechte Idee, wenn man in den Quicklinks einen Link zur Suche unterbrächte.
Erledigt.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-
-
@@Matthias Apsel
Zitat im neuen Gewand: https://forum.selfhtml.org/cites/1698 Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Leider hat das neue Gewand keine Suche, sodass man das nicht einfach nutzen kann.
Dafür gibt es aber eine Suche, in der man auch nach diesen Gewändern suchen kann. https://forum.selfhtml.org/search
Die scheint aber buggy zu sein?
alte Suche nach "body" vs. neue Suche nach "body"
Die neue Suche listet einige Treffer mehrfach auf. Das gesuchte Zitat liefert sie jedoch nicht.
Ergänzung: Dass bei der Suche in der Zitatesammlung der auf die letzten 2 Jahre beschränkte voreingestellte Suchzeitraum wenig sinnvoll ist, hatten wir schon, oder?
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo
Die scheint aber buggy zu sein?
Was das gesuchte Zitat augenscheinlich von den anderen unterscheidet, ist das Gewand von „body“, nämlich „<“ und „>“. Zudem werden alle anderen vier Zitate, die schon mit der alten Suche gefunden wurden, jeweils dreimal als Suchergebnis angezeigt.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“ -
Hallo Gunnar Bittersmann,
Ergänzung: Dass bei der Suche in der Zitatesammlung der auf die letzten 2 Jahre beschränkte voreingestellte Suchzeitraum wenig sinnvoll ist, hatten wir schon, oder?
Ja.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-
-
Hallo Gunnar,
Warum sind die eigentlich anders?
Rein technische Gründe (Stichwort Sequence, ich hätte den Start Value ändern müssen, wollte ich aber nicht da ich erst nach dem Import weiss, wo der anfängt).
LG,
CK
-
-
Hallo Matthias,
Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Redirect vom alten auf
cites/old/<id>, das dann aufcites/<id>redirected.Edit: natürlich kann man auch auf
https://forum.selfhtml.org/cites/old/zitat1925umleiten, daszitatentferne ich vorher aus der URL.LG,
CK-
Hallo Christian Kruse,
Leider sind die Nummern nicht dieselben geblieben, sodass man nicht einfach eine Weiterleitung einrichten kann.
Redirect vom alten auf
cites/old/<id>, das dann aufcites/<id>redirected.Dann müssten noch die Weiterleitungen von
http://community.de.selfhtml.org/zitatesammlung/zitat<id>nachhttps://forum.selfhtml.org/cites/old/1925eingebaut werden.Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.
-
-
-
hallo,
Es gibt keine CSS-Klassen ;-p
Da hast auch Du recht, ich korrigiere mich also abermals und sage:
Ich würde also besser 'hervorgehoben' oder 'selektiert' statt 'rot' als Name des CSS-Selektors nehmen.
Allerdings ist auch die Definition in obigem Glossars streng genommen unrichtig. Der Begriff Klasse in dem Kontext ist falsch, es müsste Typ lauten, da ein HTML Element mehrere Typen besitzen kann, während in einer Klassifikation jedes Ding genau eine Klasse hat, Zitat:
Eine Klassifikation ist nur vollständig, wenn die Klassen mutuell exklusiv und gemeinsam exhaustiv sind. In einer Typologie kann ein Element mehr als einem Typ zugeordnet sein, und es kann Elemente geben, die von der Typologie nicht erfaßt werden.
daraus folgert auch, daß 'Klasse' der falsch gewählte Begriff ist in den meisten Programmiersprachen. Ja, die gesamte OOP basiert auf einem falsch verwendeten Konzept!
Gruß, Leander
-
@@Leander
Ich würde also besser 'hervorgehoben' oder 'selektiert' statt 'rot' als Name des CSS-Selektors nehmen.
Nachdem du das auch als Name der Klasse im HTML genommen hast.
„hervorgehoben“? Warum hervorgehoben? Das geht aus dem Namen nicht hervor. Ich halte die Bezeichnung auch nicht für tauglich.
Allerdings ist auch die Definition in obigem Glossars streng genommen unrichtig. Der Begriff Klasse in dem Kontext ist falsch,
Der Kontext ist hier HTML. Es gilt also die für HTML gängige Terminologie.
es müsste Typ lauten,
Nein.
da ein HTML Element mehrere Typen besitzen kann
Aber keine Deppenleerzeichen.
Und auch nicht mehrere Typen. Das Element
<button class="selektiert">ist vom Typbutton.Mitunter meint man, wenn man von „Element“ spricht, eigentlich „Elementtyp“.
während in einer Klassifikation jedes Ding genau eine Klasse hat
Nicht im Kontext HTML.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Tag,
es müsste Typ lauten,
Nein.
Doch.
da ein HTML Element mehrere Typen besitzen kann
Aber keine Deppenleerzeichen.
Kleinkariert bist Du.
Und auch nicht mehrere Typen. Das Element
<button class="selektiert">ist vom Typbutton.Es gehört zur Klasse Button und hat den Typ 'selektiert'. Das wüsstest Du, hättest Du meinen Link gelesen.
Mitunter meint man, wenn man von „Element“ spricht, eigentlich „Elementtyp“.
Was ungenau ist. Es müsste Elementklasse heißen.
während in einer Klassifikation jedes Ding genau eine Klasse hat
Nicht im Kontext HTML.
In jedem Kontext, sonst ist es keine Klassifikation. Und jetzt mach Dich schlau und verbreite hier keine weiteren Deppenweisheiten :->
DIR keinen Gruß mehr.
-
-
-
-
-
-
Hallo Leander,
da ich jQuery nicht verwende, habe ich es über natives Javascript gelöst. Trotzdem besten Dank für Deine Antwort und das Script.
Gruß Enrico
-