How to get CSS to select ID that begins with a string (not in Javascript)?

html

css-selectors

attribute-selectors

css-best-practices

byAlex Kataev·Dec 10, 2024

To identify HTML elements where id begins with a specific string, use the following syntax in your CSS:

[id^="foo-"] {
  /* Styles for ALL superhero activities beginning with 'foo-'; always wear a cape `color: red;` */
}

This nifty bit of code relies upon the operator ^=, which in the realm of CSS, and not creepy exes, corresponds to "starts with". So, <div id="foo-bar"></div> will glide into this style like it was born to wear it.

Unpacking attribute selectors in CSS

Attribute selectors in CSS offer a powerful means of pinning down elements with a specific attribute value. The [attribute^="value"] selector, an integral component of CSS3 selectors specifications, targets all elements whose attribute starts with a particular value.

One might wonder, 'Why such precision?' Well, there are times when you havedynamically generated IDs or IDs with a common prefix representing related functions or styles. In these scenarios, [id^="foo-"] rescues you like a superhero!

Balancing classes and IDs

While ID selectors are razor-sharp, consider switching to class selectors, symbolised through ., for better code maintainability . They group elements with common characteristics under one roof. I bet Mr. Incredible wishes he had this for his kids!

.foo-fam-bam {
  /* The 'Incredibles' wear these styles */
}

Nevertheless, there are situations when selecting by ID is not a matter of choice but necessity, bringing into play the [id^="foo"] selector.

Stick to the code of conduct

The superhero of CSS, attribute selectors, also has a code of conduct :

Maintain Specificity: Overusing attribute selectors can mess with CSS specificity, which governs the hierarchy of styling rules.
Watch Performance: Overreliance might impact rendering performance as these selectors are more transcendental than class or tag selectors.
Browser compatibility: Attribute selectors work well with modern browsers, but always double-check if targeting older versions.

Solving puzzles in CSS

Despite its super powers, there are times when [id^="foo"] doesn't solve the heroes' problems. External factors like browser extensions may interfere with your styles. In those cases, !important becomes an (unrecommended) hack to overrule interference:

[id^="foo"] {
    /* CSS Kryptonite! Use it, and you may live to regret it! */
    color: red !important;
}

Broadening your arsenal

Sometimes, you might need more flexibility, in which case consider other attribute selectors:

[id*="foo"]: Matches any id that contains "foo" anywhere within the id value.
[id$="foo"]: Equivalent to 'ends with'. Useful for IDs that end with a string.
[class^="foo-"]: Matches all elements with a class beginning with foo-.
[class*="foo-"]: Matches all elements with a class containing foo- anywhere.