This is from the SF HTML5 meetup at Google SF.
Slides: CSS | CSS workshop 2019
A few interesting examples:
Select all href
s 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: