Attribute Value Matching

Beyond exact matches, attribute selectors support powerful pattern matching.

Starts With (^=)

Select attributes that start with a value:

• [href^="https"] - links starting with "https"
• [href^="#"] - anchor links
• [href^="/"] - relative paths

Ends With ($=)

Select attributes that end with a value:

• [href$=".pdf"] - PDF links
• [href$=".jpg"] - JPG images
• [src$=".png"] - PNG images

Contains (*=)

Select attributes containing a value anywhere:

[href*="google"] - links containing "google" anywhere

Styling File Links

Word Match (~=)

Matches a whole word in a space-separated list:

[class~="featured"] matches "featured" as a complete word.

External Link Indicator

Exercise: Style Image Links

Style links to images differently: