Neon DistrictISSUE #27 of 50

attribute selectors · = · ~= · |= · ^= · $= · *=

PrismaVSJank the Janitor

Prisma saysAttribute selectors match by attribute presence or value, with substring operators.

[disabled] matches presence; [type="email"] exact value; substring operators: ^= (starts), $= (ends), *= (contains), ~= (word in list), |= (exact or prefix-hyphen). Style links by file type, external URLs, or data-attributes — no extra classes.

Power-ups you unlock

[attr], [attr="val"] presence & exact
^= starts · $= ends · *= contains
~= word match · |= exact-or-prefixed
Style by href, type, or data-* without classes

Jank the Janitor attacks — common mistakes

Forgetting quotes around values with special chars
Confusing ~= (space list) with |= (hyphen prefix)
Overly clever selectors that are hard to read

Boss battleAdd a 📄 before PDF links with a[href$=".pdf"] and style data-state attributes.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>a[href$=".pdf"]::before{content:"📄 "}a[href^="https"]{color:#8aff9d}[data-state="on"]{color:#b388ff}</style></head><body style="background:#06040d;color:#e6e0ff;padding:20px">
<a href="file.pdf">a pdf</a><br><a href="https://x.com">secure link</a><p data-state="on">stateful</p></body></html>

▶ Open the interactive comic issue

‹ Pseudo-Elements · ::Placeholder · ::Selection Forms · Styling Inputs · Select · Textarea ›