SELF-Wiki: Selektoren in CSS

[Matthias Scharwies]

Hallo zusammen,

eigentlich wollte ich ja immer erst neue Aufgaben anfangen, wenn etwas beendet ist. 😉

Hier ist die August-Aufgabe: Selektoren_in_CSS^[1]

Passen die Farben (rebeccaPurpleals CSS-Farbe und gold als Komplementärfarbe)?
Ideen für bessere Icons?

Bitte schaut euch folgende Kapitel an und gebt Feedback:

Selektoren in CSS/Einstieg

• Die ganze Reihe war zusammengestückelt aus ehemaligen Einzelseiten. Bereits beim Klassenselektor wurde der Nachfahren~selektor~ ^[2], vorher sogar schon Selektorlisten erwähnt, ohne sie zu erklären.
• Obwohl die Kombinatoren mit drin sind, ist es kürzer als vorher
  → imho besser für Anfänger geeignet.

Passt das so?

Selektoren in CSS/Pseudoelemente

• wenig geändert, eig. nur Cards auf Anwendungsbeispiele eingefügt

Passt das so?

Selektoren in CSS/Logische Pseudoklassen

• Ich habe versucht, is(), not()und has() nicht einfach nur zu listen, sondern in einen fortlaufenden Zusammenhang zu setzen.^[3]
• Die Vielzahl an dynamischen Pseudoklassen ist in das == Siehe auch == gewandert.

Passt das so?

---

Ich bitte euch alle, schaut Euch die Seiten an und gebt Feedback, wo etwas nicht passt, noch unklar ist, oder postet Anwendungsbeispiele, die anderen helfen könnten.

Evtl könntet ihr auch Beispiele aus anderen Tutorials mit den neuen Selektoren, CSS-Nesting etc aufpeppen.

Vielen Dank im Voraus!

Herzliche Grüße
Matthias Scharwies

---

1. Im Wiki angefangen hatte das Ganze unter: Doku:CSS/Grundlagen von CSS/Ansprechen von Elementen (Selektoren)/Pseudoklassen - Alleine der Titel ist ein Plädoyer für einen Verzicht auf Seiten-Hierarchien! 😀
   In der Referenz habe ich die Tabellen durch das moderne Design der Eigenschaftsreferenz ersetzt und Einträge zu neuen Selektoren (waren ganz schön viele!) nachgetragen. ↩︎

2. Das zog sich seit der Doku 7.0 durch, ist mittlerweile zu Nachfahrenkombinator korrigiert. ↩︎

3. Den Abschnnitt zu Live Selector Profile und Snapshot Selector Profile, der in der Referenz stand und dort verlinkt war, habe ich depubliziert - für so was sind die Fußnoten auf die Spec da. ↩︎

[Tabellenkalk]

Hallo,

Das zog sich seit der Doku 7.0 durch, ist mittlerweile zu Nachfahrenkombinator korrigiert.

Warum ist das jetzt besser? Werden da Nachfahren kombiniert? Es werden die Nachfahren eines Elementes selektiert. Also Nachfahrenselektor oder ich hab was Grundlegendes nicht verstanden...

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

Das zog sich seit der Doku 7.0 durch, ist mittlerweile zu Nachfahrenkombinator korrigiert.

Warum ist das jetzt besser? Werden da Nachfahren kombiniert? Es werden die Nachfahren eines Elementes selektiert. Also Nachfahrenselektor oder ich hab was Grundlegendes nicht verstanden...

Was uns aufgefallen ist: Die Spec^[1] und MDN^[2] reden von einem descendant combinator.

Du hast die Selektoren und jetzt kommen mit Leerzeichen, >, ~, und + eben Kombinatoren, mit denen du zwei Selektoren kombinierst.

Nur beim & redet auch die Spec vom 3. Nesting Selector: the & selector.

Es hat sich jetzt 20 Jahre niemand an dieser Wortneuschöpfung gestoßen, wir haben es aber im Rahmen der Überarbeitung doch angepasst.
Links aus dem Forum auf die alten Begriffe werden auf den neuen Begriff weitergeleitet.

Herzliche Grüße
Matthias Scharwies

---

1. W3C: #descendant-combinators ↩︎

2. MDN: Descendant_combinator ↩︎

[Rolf B]

Hallo Matthias,

angesichts der Frage heute zu Kombinatoren habe ich mal im Wiki den Begriff "Elternpfad" wortneugeschöpft und die Begriffe Nachfahren- und Kindkombinator etwas anders beschrieben.

Rolf

[Matthias Scharwies]

Servus!

@Tabellenkalk @Rolf B

Danke für euren Input. Die Verknüpfung mit dem DOM-Tutorial finde ich gut!

Herzliche Grüße
Matthias Scharwies

[Tabellenkalk]

Hallo,

Zur Einleitung:
im ersten Satz fehlt ein Bindestrich für das SVG-Element.
Der 2. Satz beginnt mit "Besser...". Da wird nicht klar worauf sich das bezieht. Vorschlag: "Dazu wird diese Formatierung zentral in einem Stylesheet notiert."

Gruß
Kalk

[Felix Riesterer]

Lieber Matthias,

ich hatte bisher nur die Einstiegsseite angeschaut (und Kleinigkeiten ausgebessert). Mir gefällt diese Seite sehr gut, da sie ziemlich erschöpfend das Thema behandelt. Das ist beste SELFHTML-Tradition!

Hat unser Syntax-Highlighter ein Problem mit seinem Alter? Anscheinend kennt er nicht genügend CSS-Eigenschaften und -Werte:

Vermutlich ist das ein Element auf der Liste der Verbesserungen, die ein Upgrade der Wiki-Software mit sich bringen kann.

Habe ich da einen Platzhalter fälschlicherweise nicht entfernt, oder soll das so sein?

In den nächsten Tagen schaue ich mir den Rest auch noch an und gebe meinen Senf dazu.

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Lieber Felix,

Habe ich da einen Platzhalter fälschlicherweise nicht entfernt, oder soll das so sein?

Wenn man Sonderzeichen wie = (sc) in Vorlagen verwendet, muss man dem Parameter ein {{vorlage|1= bla bla =}} voranstellen. Mediawiki!

Zwei {{Beachte| }} hintereinander sehen auch blöd aus, ich weiß bloß nicht, wie man's anders formulieren sollte.

In den nächsten Tagen schaue ich mir den Rest auch noch an und gebe meinen Senf dazu.

Vielen Dank im Voraus!

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

Zwei {{Beachte| }} hintereinander sehen auch blöd aus, ich weiß bloß nicht, wie man's anders formulieren sollte.

So:

{{Beachte|
* eins
* zwei
}}

Rolf

[Ryuno-Ki]

Moin Matthias,

Hallo zusammen,

eigentlich wollte ich ja immer erst neue Aufgaben anfangen, wenn etwas beendet ist. 😉

Hier ist die August-Aufgabe: Selektoren_in_CSS^[1]

Passen die Farben (rebeccaPurpleals CSS-Farbe und gold als Komplementärfarbe)?

Zumindest der Farb-Kontrast ist ausreichend.

(Im Gegensatz zur Kachel für Ausgrauen - aber da muss ein anderer Wert als #ccc stehen. Die Kachel ist nicht Teil des Bildschirmphotos, daher hier einmal ausgeklammert.)

Ideen für bessere Icons?

Das dürfte ein eigenes Fass sein. Die Vielfalt an Styling ist bereits jetzt groß.

Magst einen eigenen Faden für Öffnen?

Bitte schaut euch folgende Kapitel an und gebt Feedback:

Selektoren in CSS/Einstieg

• Die ganze Reihe war zusammengestückelt aus ehemaligen Einzelseiten. Bereits beim Klassenselektor wurde der Nachfahren~selektor~ ^[2], vorher sogar schon Selektorlisten erwähnt, ohne sie zu erklären.
• Obwohl die Kombinatoren mit drin sind, ist es kürzer als vorher
  → imho besser für Anfänger geeignet.

Passt das so?

Können wir vielleicht box-sizing: border-box; für den Universal-Selektor verwenden?

Applaus für diese berühmte Variante.

Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

Der Hinweis-Block ist nicht ganz korrekt.

Mindestens historisch waren Klassenselektoren performanter. Selbst vor zwei Jahren war das noch der Fall.

Der Internet Explorer soll sogar zusammengebrochen sein, wenn es zu viel wurde.

Im Endeffekt haben sich Muster wie BEM daraus entwickelt.

Hinsichtlich der Anwendung würde ich ja auf TailwindCSS verweisen (Beispiel mit der Checkbox).

In den Beispielen würde ich darauf achten, sich nicht auf die Farbe zu verlassen, um Menschen mit Farbfehlsichtigkeit nicht auszuschließen.

Selektoren in CSS/Pseudoelemente

• wenig geändert, eig. nur Cards auf Anwendungsbeispiele eingefügt

Passt das so?

MDN kennt noch ein paar weitere 😇

Selektoren in CSS/Logische Pseudoklassen

• Ich habe versucht, is(), not()und has() nicht einfach nur zu listen, sondern in einen fortlaufenden Zusammenhang zu setzen.^[3]
• Die Vielzahl an dynamischen Pseudoklassen ist in das == Siehe auch == gewandert.

Passt das so?

Ja, dank der Kacheln geht das in Ordnung.

---

Ich bitte euch alle, schaut Euch die Seiten an und gebt Feedback, wo etwas nicht passt, noch unklar ist, oder postet Anwendungsbeispiele, die anderen helfen könnten.

Hab unterwegs einige Typos gevespert.

Evtl könntet ihr auch Beispiele aus anderen Tutorials mit den neuen Selektoren, CSS-Nesting etc aufpeppen.

Vielen Dank im Voraus!

Herzliche Grüße
Matthias Scharwies

Gruß,

---

1. Im Wiki angefangen hatte das Ganze unter: Doku:CSS/Grundlagen von CSS/Ansprechen von Elementen (Selektoren)/Pseudoklassen - Alleine der Titel ist ein Plädoyer für einen Verzicht auf Seiten-Hierarchien! 😀
   In der Referenz habe ich die Tabellen durch das moderne Design der Eigenschaftsreferenz ersetzt und Einträge zu neuen Selektoren (waren ganz schön viele!) nachgetragen. ↩︎

2. Das zog sich seit der Doku 7.0 durch, ist mittlerweile zu Nachfahrenkombinator korrigiert. ↩︎

3. Den Abschnnitt zu Live Selector Profile und Snapshot Selector Profile, der in der Referenz stand und dort verlinkt war, habe ich depubliziert - für so was sind die Fußnoten auf die Spec da. ↩︎

[Matthias Scharwies]

Servus!

@Felix Riesterer und @Ryuno-Ki vielen Dank für Eure Änderungen!

Da war doch einiges dabei! Ich hatte ja mal ne Rechtschreib-KI verwendet, bin nach 3 Tutorials an deren Monatslimit gestoßen und hätte abonnieren sollen. Markdow-Formatierung (** …**) als falsch für Mediawiki zu erkennen ('''…'''), hätte sie aber auch nicht vermocht.

Passen die Farben (rebeccaPurpleals CSS-Farbe und gold als Komplementärfarbe)?

Zumindest der Farb-Kontrast ist ausreichend.

Mir ging es bei der Frage darum, wie man die einzelnen Kapitel visualisieren kann:

• gemeinsame Farbe rebeccapurpleund entweder weiß wie im Logo oder gold, was unserem gold-steelBlue der Beispiele nahekommt.
• Gibt es Icons für Selektoren? - habe keine gefunden.
  Sind die Codesnippets aussagekräftig?

(Im Gegensatz zur Kachel für Ausgrauen - aber da muss ein anderer Wert als #ccc stehen. Die Kachel ist nicht Teil des Bildschirmphotos, daher hier einmal ausgeklammert.)

Ja, bitte eins nach dem anderen!

Ideen für bessere Icons?

Das dürfte ein eigenes Fass sein. Die Vielfalt an Styling ist bereits jetzt groß.

Magst einen eigenen Faden für Öffnen?

Ja, bitte eins nach dem anderen.

---

Können wir vielleicht box-sizing: border-box; für den Universal-Selektor verwenden?

Danke! Sehr gutes Beispiel! Da kommt man nur im Brainstorming drauf!

Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

Der Hinweis-Block ist nicht ganz korrekt.

Evtl. eine Formulierung wie "so wenig wie möglich, so viele wie nötig"?

Mindestens historisch waren Klassenselektoren performanter. Selbst vor zwei Jahren war das noch der Fall.

Der Internet Explorer soll sogar zusammengebrochen sein, wenn es zu viel wurde.

Offtopic: Habe einen guten PC, der für Video-Bearbeitung zusammengestellt wurde, was ich bis jetzt aber nicht angefangen habe. Mich wundert, wie viel Speicher und Kraft die Browser ziehen. Der Firefox nutzt (in bis zu 20 Tabs) teilweise 80-90% der Ressourcen!

Im Endeffekt haben sich Muster wie BEM daraus entwickelt.

Hinsichtlich der Anwendung würde ich ja auf TailwindCSS verweisen (Beispiel mit der Checkbox).

Magst du das machen? Bitte!

In den Beispielen würde ich darauf achten, sich nicht auf die Farbe zu verlassen, um Menschen mit Farbfehlsichtigkeit nicht auszuschließen.

Wo gibt es da Probleme?

Selektoren in CSS/Pseudoelemente

• wenig geändert, eig. nur Cards auf Anwendungsbeispiele eingefügt

Passt das so?

Das Tutorial soll ja nur zeigen, wie's geht. Und da wäre mir noch mehr ::after lieber als alle mal kurz vorzustellen.

Hier siehst du, was SELFHTML an Referenzseiten hat.

MDN kennt noch ein paar weitere 😇

Das ist meine große Frage, die ich nicht ansprechen wollte: Schafft es SELFHTML mit 2 Aktiven - für alle

• CSS-Eigenschaften,
• CSS-Selektoren
• JS-Methoden

nicht nur Seiten, sondern auch Beispiele mit Anwendungsfällen zu erstellen?

:future (passt zu :current und :past) hatte ich in die Übersicht mit aufgenommen, angesichts der Browser-Unterstützung und weil mir kein Beispiel einfallen will, werde ich es vorerst ausklammern.

::checkmark

::picker(select)

kommen nächste Woche.

Stay tuned!

Herzliche Grüße
Matthias Scharwies

[Ryuno-Ki]

Moin Matthias,

Servus!

@Felix Riesterer und @Ryuno-Ki vielen Dank für Eure Änderungen!

Da war doch einiges dabei! Ich hatte ja mal ne Rechtschreib-KI verwendet, bin nach 3 Tutorials an deren Monatslimit gestoßen und hätte abonnieren sollen. Markdow-Formatierung (** …**) als falsch für Mediawiki zu erkennen ('''…'''), hätte sie aber auch nicht vermocht.

Ich verwende LanguageTool auf meiner Maschine mit fasttext (letzteres wurde wohl 2024 eingestellt). Kann nicht mit dem Markup um, aber wenn das gerenderte HTML markiert und per Add-on analysiert wird, kommt sogar etwas Brauchbares bei raus. (Nicht vergessen, dem Add-on in den Einstellungen auf den eigenen Language-Tool zu verweisen!) Weil es in Java geschrieben wurde, ist es gewohnt ressourcenhungrig.

Mir ging es bei der Frage darum, wie man die einzelnen Kapitel visualisieren kann:

• gemeinsame Farbe rebeccapurpleund entweder weiß wie im Logo oder gold, was unserem gold-steelBlue der Beispiele nahekommt.

Persönlich würde ich das Ergebnis in https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel dokumentiert sehen wollen. Styleguide ist aber auch wieder ein Thema für sich.

• Gibt es Icons für Selektoren? - habe keine gefunden.
  Sind die Codesnippets aussagekräftig?

Hab mir jetzt nur den jeweils ersten Reiter (mit CSS) angeschaut. Weil ich da zu sehr als Web-Entwickler drauf schauen würde, mag ich lieber Hobbyisten die Frage beantworten lassen.

(Im Gegensatz zur Kachel für Ausgrauen - aber da muss ein anderer Wert als #ccc stehen. Die Kachel ist nicht Teil des Bildschirmphotos, daher hier einmal ausgeklammert.)

Ja, bitte eins nach dem anderen!

Fliegt da eine offene Liste wie bei den ToDos rum? Klingt für mich nach etwas, dass zum Betrieb / Customising des Wikis gehört. Damit nicht für jeden Menschen anzupassen.

Ideen für bessere Icons?

Das dürfte ein eigenes Fass sein. Die Vielfalt an Styling ist bereits jetzt groß.

Magst einen eigenen Faden für Öffnen?

Ja, bitte eins nach dem anderen.

Okay.

Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

Der Hinweis-Block ist nicht ganz korrekt.

Evtl. eine Formulierung wie "so wenig wie möglich, so viele wie nötig"?

„Kommt drauf an”. Was sind die Ziele? Klassen zum Styling zu verwenden ist „einfach” zu vermitteln. Führt dann nur zu div-Suppe und dergleichen. Beim Styling mit Attributen muss sich der*die Autorin ja mit den möglichen Werten auseinandersetzen. Sinnvoll, aber höhere Lernschwelle.

Im Endeffekt haben sich Muster wie BEM daraus entwickelt.

Hinsichtlich der Anwendung würde ich ja auf TailwindCSS verweisen (Beispiel mit der Checkbox).

Magst du das machen? Bitte!

Wenn du soweit „fertig” bist. Vielleicht magst du ja erst noch einige Runden drehen. Ich rante gerne über TailwindCSS. Gibt auch Fanatiker auf der anderen Seite. Wie so vieles im Web: es polarisiert.

In den Beispielen würde ich darauf achten, sich nicht auf die Farbe zu verlassen, um Menschen mit Farbfehlsichtigkeit nicht auszuschließen.

Wo gibt es da Probleme?

Vor allem bei Männern kann es schwer werden, Farben auseinander zu halten:

Unter Farbenfehlsichtigkeit (Dyschromatopsie, Dyschromasie) versteht man eine erbliche Anomalie der Netzhaut, von der etwa acht bis neun Prozent der Männer, aber nur etwa ein Prozent der Frauen betroffen sind. Die Betroffenen haben eine Anomalie an mindestens einem der drei farbevermittelnden Rezeptoren der Zapfenzellen der Netzhaut des Auges.

https://de.wikipedia.org/wiki/Farbenfehlsichtigkeit

Deswegen heißt es in der WCAG SC 1.4.1 auch:

Color is not the only way of distinguishing information.

Fettdruck ist da etwa eine bessere Option.

Das Tutorial soll ja nur zeigen, wie's geht. Und da wäre mir noch mehr ::after lieber als alle mal kurz vorzustellen.

Hier siehst du, was SELFHTML an Referenzseiten hat.

Würde ich mit Pull-Quotes kombinieren. Da wird ja gerne ein typographisches Anführungszeichen genutzt.

MDN kennt noch ein paar weitere 😇

Das ist meine große Frage, die ich nicht ansprechen wollte: Schafft es SELFHTML mit 2 Aktiven - für alle

• CSS-Eigenschaften,
• CSS-Selektoren
• JS-Methoden

nicht nur Seiten, sondern auch Beispiele mit Anwendungsfällen zu erstellen?

Bei MDN sind es auch überschaubar viele. Einiges lässt sich sicherlich automatisieren (da spricht wieder der Techie in mir). Aber ob das die Infrastruktur des Vereins mitmacht, kann ich nicht beurteilen. Wikimedia hat ja auch eine Flotte von Bots im Einsatz, soweit ich weiß.

Zumindest könnte auf die MDN / CSS-Spec verwiesen werden mit dem Hinweis, dass da noch mehr gibt.

:future (passt zu :current und :past) hatte ich in die Übersicht mit aufgenommen, angesichts der Browser-Unterstützung und weil mir kein Beispiel einfallen will, werde ich es vorerst ausklammern.

::checkmark

::picker(select)

kommen nächste Woche.

*dreht Däumchen

Gruß,

[Matthias Scharwies]

Guten Morgen,

Können wir vielleicht box-sizing: border-box; für den Universal-Selektor verwenden?

Ich habe das mal eingefügt und die Regel

* {
  border: medium solid green;
}

besser erklärt.

Selektoren in CSS/Pseudoelemente

• wenig geändert, eig. nur Cards auf Anwendungsbeispiele eingefügt

Das Kapitel hab' ich jetzt doch völlig neu aufgebaut.

MDN kennt noch ein paar weitere 😇

1. Hoffentlich besserer Einstieg, der auch gleich auf die Referenz verweist.
2. ::first-letter und ::first-line ::first-letter vorgezogen
   Das sind einfache Beispiele, die man gleich versteht.
3. ::before mit einfachem Beispiel, das dann ausgebaut wird.
   Das Beispiel mit den Dreiecken wollte ich eig. rausschmeißen, hab' ich aber doch dringelassen.
4. Das ::selection-Beispiel habe ich entfernt und den Abschnitt über ::placeholderin den Anhang verfrachtet.

Insgesamt ist es jetzt 2KB kürzer als vorher und hoffentlich trotzdem verständlicher.

Bitte schaut das durch!

Zukünftig sollten da noch ein paar Cards auf

• ein aktualisiertes details-Beispiel mit ::details-content
• ein Scroll-Karussell mit ::scroll-button() und ::scroll-marker-group
• ein stylbares Select-Menü mit ::picker(select)und ::checkmark

folgen.

Aber immer eins nach zwei anderen.

---

Ich bitte euch alle, schaut Euch die Seiten an und gebt Feedback, wo etwas nicht passt, noch unklar ist, oder postet Anwendungsbeispiele, die anderen helfen könnten.

Hab unterwegs einige Typos gevespert.

Evtl könntet ihr auch Beispiele aus anderen Tutorials mit den neuen Selektoren, CSS-Nesting etc aufpeppen.

Das gilt weiterhin!

Herzliche Grüße
Matthias Scharwies

[Tabellenkalk]

Hallo,

2. ::first-letter und ::first-letter vorgezogen

Vermutlich meinst du first-letter und first-line.

Gruß
Kalk

[Matthias Scharwies]

Servus!

Hallo,

2. ::first-letter und ::first-letter vorgezogen

Vermutlich meinst du first-letter und first-line.

Latürnich, danke!

Herzliche Grüße
Matthias Scharwies