02-cssTermsLevel_11Attribute Selectors

Attribute Selectors

Attribute Selectors

Level 11 — Modern CSS Architecture & Functions Selectors that target HTML elements based on the presence, exact value, or partial value (substrings) of their HTML attributes (like href, type, or custom data-* attributes).

1. Prerequisites

2. Term Category

Core Concept (Universal Modern Standard .): Attribute Selectors is a fundamental concept in this technology stack. Level 11 — Modern CSS Architecture & Functions

3. Explanation

(1) Design Motivation — "Why did we design this?"

In HTML, elements carry attributes that store data or configure behavior:

  • An input element has a type attribute (type="email", type="password", type="submit").
  • A link has a href attribute (href="https://example.com/file.pdf").
  • Custom elements store metadata using data-* attributes (data-state="active").

If you want to style all email inputs with a custom border, or add a PDF icon next to document links, you could manually add class names (like class="email-input" or class="pdf-link").

However, this leads to redundant classes, is prone to developer oversight, and clutters the markup.

To solve this, CSS introduced Attribute Selectors. They allow the browser to scan HTML attributes directly and apply styles based on their parameters.

(2) The Types of Attribute Matches

1. Presence ([attribute])

Matches any element that has the attribute, regardless of what value is inside it:

  • input[disabled]: Selects any input with the disabled attribute.

2. Exact Value Match ([attribute="value"])

Matches elements where the attribute is an exact, character-for-character match:

  • input[type="password"]: Selects password inputs.

3. Prefix Match ([attribute^="value"])

Matches elements where the attribute value starts with the specified string:

  • a[href^="https://"]: Selects secure external links.

4. Suffix Match ([attribute$="value"])

Matches elements where the attribute value ends with the specified string:

  • a[href$=".pdf"]: Selects PDF document links.

5. Substring Match ([attribute*="value"])

Matches elements where the attribute value contains the specified string anywhere:

  • a[href*="github.com"]: Selects any links pointing to GitHub.

(3) Code Examples

Short Snippet

Custom data states:

/* Style tabs based on custom HTML data attributes */
.tab[data-state="active"] {
  border-bottom: 2px solid blue;
  color: black;
}

.tab[data-state="inactive"] {
  color: gray;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attribute Selectors Demo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 30px;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: #0066cc;
    }

    /* 1. SUFFIX MATCH ($):
       Add a PDF symbol next to links ending with .pdf */
    a[href$=".pdf"]::after {
      content: " (📄 PDF)";
      font-size: 0.8rem;
      color: red;
      font-weight: bold;
    }

    /* 2. PREFIX MATCH (^):
       Add an external icon to secure external links */
    a[href^="https://"]::after {
      content: " ↗";
      color: #777;
    }

    /* Exceptions: Ignore links containing our own domain name */
    a[href*="mysite.com"]::after {
      content: ""; /* Clears the external icon */
    }
  </style>
</head>
<body>

  <h2>Resource Links</h2>
  <ul>
    <li><a href="https://mysite.com/about">About Us</a> (Internal Link)</li>
    <li><a href="https://google.com">Search Engine</a> (External Link)</li>
    <li><a href="/downloads/user_guide.pdf">User Manual</a> (PDF document)</li>
  </ul>

</body>
</html>

4. Common Mistakes & Pitfalls

Mistake 1: Leaving values unquoted in complex parameters

The mistake: Declaring a[href^=https://] instead of a[href^="https://"].

Why it's wrong: While some simple values (like [type=text]) are tolerated by browsers without quotes, special characters (like slashes, colons, or dots) will confuse the CSS parser and cause the entire ruleset to fail.

Fix: Always wrap attribute values in double quotes ("value").

Mistake 2: Confusing Substring Attribute Matchers (*=, ^=, $=)

The mistake: Using [href^="pdf"] expecting to target external PDF links ending in .pdf.

Why it's wrong: Prefix ^= matches attribute values STARTING with a substring. Suffix $= matches attribute values ENDING with a substring.

Incorrect:

a[href^="pdf"] { ... } /* ❌ Matches URLs STARTING with pdf, not ending! */

Fix:

a[href$=".pdf"] { ... } /* Matches URLs ENDING with .pdf */

Mistake 3: Forgetting Case-Insensitive Modifier Flag i in Attribute Selectors

The mistake: Writing a[href$=".pdf"] missing .PDF uppercase extensions.

Why it's wrong: Attribute selector matching is case-sensitive by default. Add the i modifier flag inside the brackets [href$=".pdf" i] to match uppercase .PDF links.

Incorrect:

a[href$=".pdf"] { ... } /* ❌ Misses .PDF uppercase links! */

Fix:

a[href$=".pdf" i] { ... } /* Case-insensitive attribute matching */

5. Practice Exercises

Scenario: An author automatically styles external links starting with https:// using a[href^="https://"].

Requirements:

  1. Apply a[href^="https://"] selector.
  2. Add external link icon indicator via ::after.
Answer

Implementation

/* Target links starting with https:// */
a[href^="https://"]:not([href*="mywebsite.com"]) {
  color: #2563eb;
  padding-right: 1.25rem;
  background: url("../icons/external-link.svg") no-repeat right center;
  background-size: 1rem 1rem;
}

Technical Explanation

  1. The Attribute Prefix Selector (^=): [attr^="val"] matches elements whose attribute value STARTS WITH the specified string.
  2. Automated UI Enhancements: Automatically appends external link icons without requiring manual class additions in HTML.
  3. Negation Pseudo-Class (:not()): Excludes internal domain links using :not([href*="mywebsite.com"]).

Exercise 2: Targeting Download File Types with Substring Match Selector

Scenario: Styles PDF download links using a[href$=".pdf"].

Requirements:

  1. Apply a[href$=".pdf"] selector.
Answer

Implementation

/* Target links ending with .pdf */
a[href$=".pdf"] {
  font-weight: 600;
  color: #dc2626;
}

a[href$=".pdf"]::before {
  content: "[PDF] ";
  font-size: 0.75em;
}

Technical Explanation

  1. The Attribute Suffix Selector ($=): [attr$="val"] matches elements whose attribute value ENDS WITH the specified string.
  2. File Type Indicator: Warns users when clicking a link will trigger a PDF file download.
  3. Enhanced UX: Improves accessibility and transparency for document links.

Exercise 3: ARIA Accessibility Attribute Targeting for State Controls

Scenario: Styles expanded dropdown menus using [aria-expanded="true"].

Requirements:

  1. Apply [aria-expanded="true"] selector.
Answer

Implementation

.dropdown-trigger[aria-expanded="true"] {
  background-color: #1e293b;
  color: #ffffff;
}

.dropdown-trigger[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg);
}

Technical Explanation

  1. ARIA Attribute Selector: Styles UI components directly based on accessibility ARIA attributes (aria-expanded, aria-selected, aria-disabled).
  2. Single Source of Truth: Ensures CSS visual state remains 100% in sync with accessibility screen reader state.
  3. Eliminates Extra State Classes: Avoids toggling redundant .is-active classes in JavaScript.

7. Key Takeaways

  • Attribute selectors target HTML elements based on their attribute metadata.
  • [attr] checks for presence, [attr="val"] checks for exact character matches.
  • ^= matches the start (prefixes), and $= matches the end (suffixes).
  • *= matches any substring overlap in the attribute.
  • Always wrap attribute values in double quotes to prevent syntax parsing crashes.

Links to this page:

  1. Combinator Selectors
Built with LogoFlowershow