On: CSS Selectors: A Visual Guide

[hk1337]

Very cool. It seems to be missing the begins with and ends with selectors for the attr-val.

[title^=“old”]

and

[title$=“old”]

[reaperducer → hk1337]

[title^=“old”]

and

[title$=“old”]

Once you get used to using these, and their relatives, you find all kinds of uses for them, like applying styles only to telephone links:

  a[href^="tel:"]

[6510 → reaperducer]

You can do [data-foo*="banana"] and trigger it by changing the dataset to something that contains banana.

https://jsfiddle.net/gaby_de_wilde/s729uk61/

[hk1337 → reaperducer]

Definitely, also, they're called CSS selectors but I use them a lot in javascript for query selection too.

[ttfkam → hk1337]

I'm constantly amused by how often regular expression syntax can be found in all sorts of unexpected places. It really is foundational knowledge these days.

    ^ means match input start
    $ means match input end

Makes remembering the CSS selector syntax easier once you know that. (Or makes the regex syntax easier to remember?)

[Technotroll → hk1337]

Regular selectors... (pun intended)