Vor ein paar Wochen schrillten einige Alarmglocken, als die CSS Working Group (CSSWG) beschloss, eine if()-Bedingung zur Spezifikation des CSS Values Module Level 5 hinzuzufügen. Es war Lea Verous X-Post am selben Tag, der …
/* Case sensitive */
a[href*='css-tricks' s] {}
/* Case insensitive */
a[href*='css-tricks' i] {}Das Hinzufügen eines s macht den Selektor Groß- und Kleinschreibung-empfindlich und i macht ihn Groß- und Kleinschreibung-unempfindlich.
Ich wusste nicht, dass die Unterstützung für @supports zur Bestimmung der Selektor-Unterstützung so gut war! Normalerweise denke ich bei @supports an eine Möglichkeit, die Unterstützung für property: value-Paare zu testen. Aber mit der Funktion selector() können wir die Unterstützung für Selektoren testen …
Ich denke, das ist ein guter Rat von Silvestar Bistrović
Ein aktivierender Selektor ist das, was ich einen Selektor nenne, der eine Aufgabe erfüllt, ohne die betreffende Regel zu deaktivieren.
Das klassische Beispiel ist das Anwenden von margin auf alles, nur um es dann wieder entfernen zu müssen …
Dies ist eine nette interaktive Seite von Ville V. Vanninen, um die Namen von Dingen in der CSS-Syntax nachzuschlagen. Ich habe das Gefühl, dass die einfach zu merkenden "Selektor", "Eigenschaft" und "Wert" sind, aber selbst als jemand, der schreibt …
Einen "Eltern-Selektor" in CSS zu haben, wird regelmäßig als etwas erwähnt, das CSS wirklich gebrauchen könnte. Ich habe das Gefühl, diesen Gedanken selbst schon oft gehabt zu haben, aber wenn ich dann mein Gehirn nach einem Anwendungsfall frage, finde ich es …
Sie können mehrere Klassen für ein HTML-Element haben
<div class="module p-2"></div>Daran ist überhaupt nichts falsch oder ungültig. Es hat zwei Klassen. In CSS werden beide angewendet
.module { }
.p-2 { }const div = document.querySelector("div");
.foo {
}Programmatisch, ist
if (element has a class name of "foo") {
}Nachfahren-Selektoren sind &&-Logik und Kommas sind ||. Von da an wird es nur noch komplizierter, mit Dingen wie Kombinatoren und Pseudo-Selektoren. Nur …