Spoooooky CSS-Selektoren

Lasst uns dieses Jahr ein wenig in Halloween-Stimmung kommen mit einigen Beiträgen zum Thema Halloween! Ich fange damit an, einige CSS-Selektoren AUS DEM GRABE ZU HOLEN. Ähm. CSS-Selektoren, die SIE BIS INS MARK ERFRIEREN WERDEN. OK, vielleicht nicht, aber sie werden zumindest irgendwie seltsam sein.

Der Lobotomized Owl Selektor

Heydon Pickering hat diesen vor zwei Jahren berühmt gemacht. Er sieht so aus

* + * {
  margin-top: 1.5em;
}

Lobotomized owl? Verstehste?!

Die Idee ist, dass nur Elemente, die ein vorheriges Geschwisterelement haben, einen Rand oben bekommen. So dass Sie nicht Dinge tun müssen wie

.the-last-one-so-don't-put-margin-on-me {
  margin-bottom: 0;
}

Stattdessen erhalten Sie gleichmäßige Abstände quasi kostenlos

Siehe den Pen Lobotomized Owl von Chris Coyier (@chriscoyier) auf CodePen.

Sie können sehen, wie andere Leute damit spielen.

Der Mr. Ghost Selektor

Dieser kleine Kerl besteht aus so seltsamen Zeichen, dass meine WordPress-Seite sie nicht einmal speichern kann. Also machen wir das in einem Pen (das Einbetten sieht vielleicht auch seltsam aus, versuchen Sie, es auf CodePen selbst anzusehen)

Siehe den Pen Ghost Selectors von Chris Coyier (@chriscoyier) auf CodePen.

Apropos ungewöhnliche Zeichen, denken Sie daran, dass Emojis auch gültig sind!

<div class="&#x1f47b;">
  Mrs. Ghost
</div>

.👻 {

}

Monster-Selektoren

Apropos ungewöhnliche Zeichen, wie wäre es mit einigen dieser Donger

Diese könnten auch Selektoren sein! Aber in diesem Fall müssen einige dieser Zeichen in CSS maskiert werden. ESCAPE FROM MONSTER ISLAND. Oder so. Glücklicherweise hat Mathias Bynens ein Werkzeug dafür.

Was bedeutet, dass wir so machen können

Siehe den Pen jrRBqB von Chris Coyier (@chriscoyier) auf CodePen.

Oder wie wäre es mit ein paar FANGS

<div ^^=^^>
   OoooOOOO FANGS
</div>

[\^\^^=\^\^] {
  
}

Ein weiterer Lobotomie-Selektor

Wie wäre es mit einem wie diesem

the-brain:empty {
  color: green;
}

Was für ein Selektor ist das Gehirn? Es ist ein Element, das wir DURCH WAHNSINNS-WISSENSCHAFT wie FRANKENSTEINS MONSTER SELBST ERSCHAFFEN haben. Oder erstellen Sie einfach ein benutzerdefiniertes Element oder so.

<template>
  The brain!
</template>

var tmpl = document.querySelector('template');

var brainProto = Object.create(HTMLElement.prototype);

brainProto.createdCallback = function() {
  var root = this.createShadowRoot();
  root.appendChild(document.importNode(tmpl.content, true));
};

var brain = document.registerElement('the-brain', {
  prototype: brainProto
});

(Vielleicht sollte man heute customElements.define() dafür verwenden? Ich weiß es nicht.)

Also wird unser ursprünglicher Selektor jetzt übereinstimmen, wenn wir das tun

<the-brain></the-brain>

Aber wie der Selektor schon sagt, wird er nicht übereinstimmen, wenn wir das tun

<the-brain>
  Fallback content inside.
</the-brain>

Er wird nicht einmal übereinstimmen

<the-brain> </the-brain>

Sonst könnten wir the-brain:blank {} machen, aber :blank wird noch nicht wirklich unterstützt.

Der insensible Selektor

Was ist gruseliger als Unsinn? Abgesehen von ALLEM ANDEREN. Ja, nun, das ist immer noch ein wirklich seltsam aussehender Selektor, richtig?

a[href$=".zip" i] {

}

Das " i" am Ende sagt dem Attributwert, dass ".zip" Groß- oder Kleinbuchstaben übereinstimmen kann.

Dieser stammt von Wes Bos

🔥 CSS4 bekommt eine nicht-sensible Übereinstimmung bei Attributselektoren! pic.twitter.com/7LQBi2VUcL

— Wes Bos (@wesbos) 2. Dezember 2015

Der "Only The Righteous Shall Stand"-Selektor

ZEBRA-Streifen (ZOMBIE) sind einfach, oder?

tr:nth-child(odd) {
  background: WhiteSmoke;
}

Aber was, wenn wir einige Zeilen mit unserem MAGISCHEN JAVA-SKRIPT-ZAUBER VERBANNNEN, indem wir bestimmten Zeilen eine Klassenbezeichnung zuweisen

...
<tr><td></td></tr>
<tr class="BANISHED"><td></tr></tr>
<tr><td></td></tr>
...

.BANISHED {
  display: none;
}

Jetzt sind unsere Zebra-Streifen alle durcheinander, als wären zu viele Molche in den Kessel gefallen, während wir den Zauber sprachen (igitt, tut mir leid).

Selektoren Level 4 haben eine Lösung

tr:nth-child(odd of li:not(.BANISHED)) {
  background: WhiteSmoke;
}

Das würde bedeuten, dass "ungerade" nur auf den noch sichtbaren Zeilen berechnet wird und die Zebra-Streifen intakt bleiben.

Es wird aber noch nirgendwo unterstützt, also lasst uns wie eine BANSHEE SCHREIEN, bis es das wird.

Der Messer-durch-die-Eingeweide-Selektor

Erinnern Sie sich an das benutzerdefinierte Element, das wir erstellt haben? <the-brain>? Nehmen wir an, die Vorlage für dieses Element wäre stattdessen wie diese, mit etwas tatsächlichem HTML darin

<template>
  <div class="braaaain">The brain!</div>
</template>

Wie wir bereits gesehen haben, können Sie CSS auf dieses Element anwenden und es wird, wie erwartet, hineinkaskadiert. Aber Sie können die BLUTIGEN HÄNDE nicht direkt an die Elemente darin legen.

/* works fine */
the-brain {
  color: pink;
}
/* But you can't reach inside like this */
.braaaain {
  color: red;
}

Das ist Kapselung. Das ist irgendwie der Punkt von Web Components. Sie können ein Messer durch diesen GRUSELIGEN ALTEN SHADOW DOM stechen, so:

html /deep/ .braaaain {
  color: red;
}

Das funktioniert nur in Blink und ich habe keine Ahnung, ob es Standard ist oder was. Ahhh die SCHRECKEN DER CROSS-BROWSER-KOMPATIBILITÄT.

Der ID-Selektor

#container {

}

Zu spezifisch. #lol