Detailed explanation
CSS attribute selectors match elements according to the presence or value of HTML attributes. They let you express rules such as “style checkbox inputs” or “mark links whose URLs start with https://” without introducing extra classes. An attribute selector uses square brackets and can stand alone, as in [disabled], or combine with a type selector, as in input[disabled]. These selectors are useful when an existing attribute already describes the condition you want to style; classes remain suitable for presentation-specific groupings.
There are seven main forms. [attr] checks whether an attribute exists, even if its value is empty. [attr="val"] requires an exact value. [attr~="val"] matches a complete token in a whitespace-separated list: [class~="active"] matches class="tab active" but not class="inactive". [attr|="val"] matches either the exact value or that value immediately followed by a hyphen; [lang|="en"] therefore matches en and en-IN. The remaining forms perform string comparisons: [attr^="val"] matches a prefix, [attr$="val"] matches a suffix, and [attr*="val"] matches a substring anywhere in the value.
For example, a[target="_blank"] { color: orange; } styles links with that exact target, while input[type="checkbox"] { margin-right: 8px; } styles checkbox inputs. The rule a[href^="https://"]::after { content: ' ↗'; } adds an arrow after links whose written href begins with https://. Attribute matching examines the attribute value, not a browser-resolved URL, so a relative href will not match that prefix even on an HTTPS page. You can combine conditions: input[type="text"][required] must satisfy both attribute selectors.
Value case sensitivity depends on the attribute and document language. Adding i, as in [data-status="ready" i], requests ASCII case-insensitive matching; s explicitly requests case-sensitive matching, but browser support should be checked. Each attribute selector contributes class-level specificity, 0-1-0; input[type="checkbox"] has specificity 0-1-1. Interviewers commonly check whether you know all seven forms, distinguish tokens from substrings, and understand that attribute presence is not always equivalent to live UI state: use :checked for a checkbox’s current checked state.
Key points to remember
- [attr] checks presence; [attr="val"] checks an exact value.
- [attr~="val"] matches a whitespace-separated token; [attr|="val"] matches an exact value or a hyphen-prefixed continuation.
- [attr^="val"], [attr$="val"], and [attr*="val"] match prefixes, suffixes, and substrings respectively.
- The i flag requests ASCII case-insensitive matching; the s flag requests case-sensitive matching where supported.
- Each attribute selector adds 0-1-0 specificity, and multiple attribute selectors can be combined.
Common mistakes candidates make
- Listing only five forms and forgetting the ~= token matcher and |= hyphen matcher.
- Using *= when a complete token is required, accidentally matching values such as inactive when searching for active.
- Treating [checked] as the current checkbox state instead of using :checked.
Likely follow-up questions
What is the difference between [class~="btn"] and [class*="btn"]?
[class~="btn"] matches btn as a complete whitespace-separated class token, such as class="btn primary". [class*="btn"] also matches substrings inside longer class names, such as class="btn-large".
How does attribute-selector specificity compare with class-selector specificity?
Both contribute 0-1-0 specificity. For example, [required] and .required have equal specificity, while input[required] adds a type selector and becomes 0-1-1.
Why can [checked] and :checked match different checkboxes?
[checked] tests for the checked HTML attribute, which defines the default checked state. :checked reflects the current state, so user interaction can change whether it matches without changing the attribute.
Interview tip: Group the seven selectors by presence, exact value, token or hyphen matching, and substring matching, then demonstrate two practical examples.