Power of Regular Expressions in CSS

Attribute selectors allow selecting elements based on what's written inside their tags (href, title, type, placeholder).

1. Exact Match

input[type="password"] { border-color: red; }

2. Smart Search (Magic Symbols)

• [attr^= " val " ]: Starts with... (convenient for external site links: a[href^="http"]).
• [attr$= " val " ]: Ends with... (file selection by extension: a[href$=".pdf"]).
• *[attr= " val " ]**: Contains substring... (search for any mention of a word in attribute).
• [attr~= " val " ]: Contains word in a list (space-separated).

/* Add PDF icon only to document links */
a[href$=".pdf"]::before {
  content: "📄";
}

/* Style all external links */
a[href*="://"]:not([href*="mysite.com"]) {
  color: orange;
}