CSSDomIntermediate

Attribute selectors ([attr], [attr=val], [attr^=val], [attr$=val])

Attribute selectors target HTML elements based on the presence or value of their attributes.

Review the syntaxStudy the examplesOpen the coding app
[attribute] { ... }
[attribute="value"] { ... }
[attribute^="value"] { ... }
[attribute$="value"] { ... }
[attribute*="value"] { ... }
[attribute~="value"] { ... }
[attribute|="value"] { ... }
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Attribute selectors target HTML elements based on the presence or value of their attributes.

Attribute selectors provide a powerful way to style elements based on their HTML attributes, offering more granular control than basic element, class, or ID selectors. They allow developers to target elements not just by their tag name, but by whether they possess a certain attribute, or if that attribute's value matches a specific pattern. - `[attribute]` selects elements that have the specified attribute, regardless of its value (e.g., `[required]` targets all elements with the `required` attribute). - `[attribute="value"]` selects elements where the attribute's value is *exactly* equal to 'value' (e.g., `[type="text"]` targets text input fields). - `[attribute^="value"]` selects elements where the attribute's value *starts with* 'value' (e.g., `[href^="https://"]` targets secure links). - `[attribute=".png"]` targets PNG images). - `[attribute*="value"]` selects elements where the attribute's value *contains* 'value' anywhere within it (e.g., `[alt*="logo"]` targets images whose alt text contains 'logo'). - `[attribute~="value"]` selects elements where the attribute's value contains 'value' as a *whole word* in a space-separated list (e.g., `[class~="button"]` targets elements with a 'button' class, even if they have other classes). - `[attribute|="value"]` selects elements where the attribute's value is *exactly* 'value' or starts with 'value' followed by a hyphen (e.g., `[lang|="en"]` targets 'en', 'en-US', 'en-GB'). These selectors are case-sensitive by default but can be made case-insensitive by adding an `i` flag after the closing bracket (e.g., `[attribute="value" i]`). They are particularly useful for styling forms, links, or elements with custom data attributes, providing flexibility and semantic targeting.

Quick reference

Syntax

[attribute] { ... }
[attribute="value"] { ... }
[attribute^="value"] { ... }
[attribute$="value"] { ... }
[attribute*="value"] { ... }
[attribute~="value"] { ... }
[attribute|="value"] { ... }

See it in practice

Examples

1

Styling elements with a specific attribute

input[required] {
  border: 2px solid orange;
}

<!-- HTML -->
<input type="text" required>
<input type="email">
Output:
The text input will have an orange border, the email input will not.

The `[required]` selector targets any input field that has the `required` attribute, regardless of its value.

2

Styling links based on exact href value

a[href="https://example.com/about"] {
  color: purple;
  font-weight: bold;
}

<!-- HTML -->
<a href="https://example.com/about">About Us</a>
<a href="https://example.com/contact">Contact</a>
Output:
The 'About Us' link will be purple and bold.

This selector targets an anchor tag whose `href` attribute's value is exactly `https://example.com/about`.

3

Styling images based on file extension (ends with)

img[src$=".png"] {
  border: 3px dashed blue;
}
img[src^="https://"] {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

<!-- HTML -->
<img src="logo.png" alt="Company Logo">
<img src="https://example.com/photo.jpg" alt="A Photo">
Output:
The 'logo.png' image will have a blue dashed border. The 'photo.jpg' image will have a box shadow.

The `[src$=".png"]` selector targets images whose `src` attribute ends with `.png`. The `[src^="https://"]` targets images whose `src` starts with `https://`.

4

Styling elements with a class containing a specific word

[class~="card"] {
  background-color: #f0f0f0;
  padding: 15px;
  margin: 10px;
}

<!-- HTML -->
<div class="product card">
  <h3>Product</h3>
</div>
<div class="user-profile">
  <h3>Profile</h3>
</div>
Output:
The div with classes 'product card' will have a light gray background, padding, and margin.

The `[class~="card"]` selector targets elements that have 'card' as a whole word within their `class` attribute, useful for components that might have multiple classes.

Debug faster

Common Errors

1

Case Sensitivity Issues

Cause: Attribute values are case-sensitive by default, leading to selectors not matching as expected when values differ only in case.

Fix: Ensure attribute values in your CSS selectors exactly match the case used in HTML. For case-insensitive matching, add the `i` flag to the selector (e.g., `[type="text" i]`).

input[type="Text"] { /* Will not match <input type="text"> */ }
input[type="text" i] { /* Will match <input type="text"> and <input type="Text"> */ }

Runtime support

Compatibility

N/AAll modernCSS2.1+ (basic), CSS3+ (substring matching)

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Attribute selectors target HTML elements based on the presence or value of their attributes.

Case Sensitivity Issues: Ensure attribute values in your CSS selectors exactly match the case used in HTML. For case-insensitive matching, add the `i` flag to the selector (e.g., `[type="text" i]`).