CSS - Attribute Selectors

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10 minutes

Attribute selectors are perfect for targeting links, inputs, and components by their attributes and values.

Learning Objectives

• Use exact, prefix, suffix, substring, word, and language attribute selectors.

Details & Examples

• [attr], [attr="value"]
• [attr^="prefix"], [attr$="suffix"], [attr*="substr"]
• [attr~="word"], [attr|="lang"]

Pitfalls

• Be precise with performance: [attr*=substr] can be slower than exact matches.

Checks for Understanding

1. Which selector matches lang="en-US" and lang="en"?

Exercises

1. Style external links differently using attribute selectors.
2. Target PDF links to add a small icon using ::after.