04. Attribute Selectors — Targeting Elements by Their Properties

_{—Part of CSS Primer for the AI Era — Selectors}
Attribute selectors let us target elements based on the attributes they carry
— things like href, type, alt, data-*, and more.

Where combinators help us describe relationships,
attribute selectors help us describe meaning.

They give us a way to style elements by what they are,
not just where they sit in the DOM.

Attribute selectors match elements based on:

• the presence of an attribute
• the exact value of an attribute
• part of a value
• patterns inside a value

This gives us a second axis of control:
not structure, but properties.

[attribute]

This matches any element that has that attribute.

Example:

• [disabled] → any element with a disabled attribute,
  regardless of value.

This is the simplest form — “has this property.”

[attribute=“value”]

This matches elements whose attribute value is exactly the string we specify.

Example:

• [type=“email”] → any <input> whose type is exactly email.

This is the most common pattern in forms.

[attribute^=“value”]

The caret (^) means starts with.

Examples:

• [src^=“icon-”] → any element whose src attribute starts with icon-
  This is clean, safe, and common in UI icon systems.
• [data-state^=“open”] → any element whose data-state begins with open
  (e.g., open, open-soft, open-true).
  This is excellent for modern component‑driven markup.
• [class^=“btn-”] → any element whose class list begins with btn-.

[attribute$=“value”]

The dollar sign ($) means ends with.

Example:

• [src$=“.svg”] → images or icons that end with .svg .

Great for targeting file types.

[attribute*=“value”]

The asterisk (*) means “contains”.

Example:

• [class*=“icon-”] → any element whose class list contains something like icon-home, icon-user, etc.

This is powerful, but we use it carefully — it can match more than we expect.

[attribute~=“value”]

The tilde (~) means “contains this word in a space‑separated list”.

Example:

• [rel~=“noopener”] → matches <a rel=“noopener noreferrer”>.

This is perfect for attributes that behave like class lists.

[attribute|=“value”]

The pipe (|) means value or value‑something.

Example:

• [lang|=“en”] → matches en, en-US, en-GB, etc.

This is mostly used for language and locale.

We reach for attribute selectors when:

• the attribute expresses meaning
• the attribute expresses state
• the attribute expresses type
• the attribute expresses intent
• classes are not available or not meaningful
• AI‑generated markup uses predictable attributes

Examples:

• [aria-expanded=“true”]
• [data-state=“open”]
• [role=“button”]
• [type=“checkbox”]

These selectors let us style based on what the element is doing,
not just what it’s called.

We avoid attribute selectors when:

• we need performance on very large documents
• the attribute value is long or unpredictable
• the pattern might match too broadly
• a class would express the meaning more clearly

Classes remain the most intentional way
to express purpose.

AI‑Steering Cue:

“Use an attribute selector — 
target elements by their properties, not their position.”

This helps us guide AI toward meaning‑based styling
rather than structural guessing.

• Suggested Next Reading: State Selectors — Targeting Elements by Their Conditions

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←