[Advanced] CSS Selectors with Estelle Weyl (Google / SF HTML5)

This is from the SF HTML5 meetup at Google SF.

Slides: CSS | CSS workshop 2019

A few interesting examples:

Select all hrefs that begin with mailto.

a[href^=mailto] { background-image: url(emailicon.gif); }

Select all links to PDF files and append content:

a[href$=pdf]::after { content: " (PDF)"; }

Select an element with a title attribute that contains word, like <a title="Sentence with 4 words">.

a[title~="word"] {}

Select an input where the value is out of range (like min/max for a number input).

input:out-of-range { background-color: pink;}

Also mentioned: http://www.specifishity.com/

All of the SF HTML5 videos are listed here:

1 Like

This looks like a great talk! I’ve got it bookmarked to watch :slight_smile:

1 Like

This kind of selector turned out to be useful when writing a scraper.

A post was split to a new topic: CSS @supports