Attribute selectors in HTML and CSS target elements based on their attributes. 1. Exact matches like a[] apply styles only when the attribute value is precisely as specified. 2. Partial matches using *= (contains), ^= (starts with), or $= (ends with) allow broader targeting such as dynamic URLs or file types. 3. Boolean attributes can be selected simply by presence, without needing a value, useful for UI states or flags. These selectors offer flexibility but require attention to syntax and specificity.

When working with HTML and CSS, attribute selectors are a powerful way to target elements based on their attributes — especially useful when dealing with links (href) or custom data attributes (data-*). These selectors let you style or manipulate elements without needing specific classes or IDs.

Matching Exact Attribute Values

One of the most straightforward uses of attribute selectors is matching exact values. This is especially handy for href links or data-* attributes where precision matters.

For example:

a[href="https://example.com"] {
  color: red;
}

This rule applies only to anchor tags pointing exactly to https://example.com. It won’t match if there’s a query string or fragment identifier added, like https://example.com?source=nav.

The same logic works for data attributes:

div[data-role="button"] {
  cursor: pointer;
}

This targets only those <div> elements that have data-role="button" and ignores similar ones like data-role="menu".

• Use this when you want strict control over which elements get styled.
• Keep in mind the match has to be exact — capitalization and extra characters matter.

Partial Matches with Attribute Selectors

Sometimes you don’t need an exact match. For cases like dynamic URLs or multiple data attribute variations, partial matches come in handy.

CSS offers several modifiers:

• *= (contains): matches any element whose attribute value contains the substring.
• ^= (starts with): matches if the attribute starts with the given value.
• $= (ends with): matches if the attribute ends with the given value.

Here’s how they might look in practice:

a[href*="example"] {
  font-weight: bold;
}

a[href$=".pdf"] {
  background: url(pdf-icon.png) left center no-repeat;
}

These are useful for:

• Styling all external links (e.g., href*="https://").
• Identifying file-type links like PDFs or images.
• Targeting elements with shared but not identical data attributes.

Just remember that these can be less precise than exact matches, so test carefully.

Working with Boolean Attributes and Data Attributes

Some attributes don’t need a value to be selected — just their presence matters. This is common with boolean attributes like disabled, but also sometimes seen with data-* attributes used as flags.

For example:

button[disabled] {
  opacity: 0.5;
}

Or with a data attribute:

div[data-active] {
  border: 2px solid green;
}

This approach is great for:

• Indifferently checking whether something is present.
• Building UI states based on markup alone (like toggles or conditional styles).

You don’t need to write [data-active="true"] unless you specifically want to match that value — just [data-active] is enough to trigger the selector.

That’s basically how attribute selectors work with href and data-* attributes. They’re flexible, but small differences in syntax can make a big difference in behavior — so always double-check your conditions.

The above is the detailed content of How do attribute CSS Selectors work for href or data attributes?. For more information, please follow other related articles on the PHP Chinese website!