Attribute Selectors

Attribute selectors target elements according to the attributes written in their HTML.

[disabled] matches elements with a disabled attribute. [type="email"] matches an exact attribute value. Other operators can match prefixes (^=), suffixes ($=), or substrings (*=).

Attribute selectors are useful for forms, links, and semantic states when the attribute already communicates the information you need.

An attribute selector checks the DOM attribute; it does not search displayed text or a CSS property.

The type attribute distinguishes email and text inputs.

HTML

<div class="fields"><input type="text" placeholder="Name"><input type="email" placeholder="Email"></div>

CSS

.fields input { display: block; margin: 8px 0; padding: 9px; border: 1px solid #cbd5e1; }
.fields input[type="email"] { border-color: #2563eb; background: #eff6ff; }

Rendered output

Observe: Only the email input gets the blue border and light background.

A disabled control looks visually different.

HTML

<div class="actions"><button type="button">Continue</button><button type="button" disabled>Unavailable</button></div>

CSS

.actions button { margin: 5px; padding: 9px 14px; }
.actions button[disabled] { opacity: 0.5; cursor: not-allowed; }

Rendered output

Observe: The second button is disabled in HTML and styled with reduced opacity.

An attribute selector checks the DOM attribute; it does not search displayed text or a CSS property.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Attribute values can be case-sensitive depending on the attribute and selector flags.
• A visually disabled-looking element is not actually disabled unless its HTML behavior says so.

Select only links whose href begins with https:, and give them a small external-link indicator.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use attribute selectors when existing HTML attributes naturally express the desired target.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.