SELF-Wiki: Selektoren in CSS

- css
- selektor
- selfhtml-wiki
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 (rebeccaPurple
als CSS-Farbe und gold
als Komplementärfarbe)?
Ideen für bessere Icons?
Bitte schaut euch folgende Kapitel an und gebt Feedback:
Passt das so?
Passt das so?
is()
, not()
und has()
nicht einfach nur zu listen, sondern in einen fortlaufenden Zusammenhang zu setzen.[3]== 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
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. ↩︎
Das zog sich seit der Doku 7.0 durch, ist mittlerweile zu Nachfahrenkombinator korrigiert. ↩︎
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. ↩︎
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
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
MDN: Descendant_combinator ↩︎
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
Servus!
Danke für euren Input. Die Verknüpfung mit dem DOM-Tutorial finde ich gut!
Herzliche Grüße
Matthias Scharwies
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
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
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
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
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 (
rebeccaPurple
als CSS-Farbe undgold
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()
undhas()
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ß,
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. ↩︎
Das zog sich seit der Doku 7.0 durch, ist mittlerweile zu Nachfahrenkombinator korrigiert. ↩︎
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. ↩︎
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 (
rebeccaPurple
als CSS-Farbe undgold
als Komplementärfarbe)?Zumindest der Farb-Kontrast ist ausreichend.
Mir ging es bei der Frage darum, wie man die einzelnen Kapitel visualisieren kann:
rebeccapurple
und entweder weiß wie im Logo oder gold, was unserem gold-steelBlue der Beispiele nahekommt.(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.
Das ist meine große Frage, die ich nicht ansprechen wollte: Schafft es SELFHTML mit 2 Aktiven - für alle
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
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
rebeccapurple
und 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.
Würde ich mit Pull-Quotes kombinieren. Da wird ja gerne ein typographisches Anführungszeichen genutzt.
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ß,
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.
::first-letter
und ::first-line
::first-letter
::before
mit einfachem Beispiel, das dann ausgebaut wird.::selection
-Beispiel habe ich entfernt und den Abschnitt über ::placeholder
in 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
::details-content
::scroll-marker-group
::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
Hallo,
::first-letter
und::first-letter
vorgezogen
Vermutlich meinst du first-letter
und first-line
.
Gruß
Kalk
Servus!
Hallo,
::first-letter
und::first-letter
vorgezogenVermutlich meinst du
first-letter
undfirst-line
.
Latürnich, danke!
Herzliche Grüße
Matthias Scharwies