Keywords: CSS attribute selectors | ID matching | partial text selection
Abstract: This article explores advanced applications of CSS attribute selectors for partial text matching, focusing on the combined use of selectors like [id*='value'] and [id$='value']. Through a practical case study—selecting <a> elements with IDs containing a specific substring and ending with a particular suffix—it details selector syntax, working principles, and performance optimization. With clear code examples and step-by-step analysis, it helps developers master precise element selection in complex scenarios.
Core Mechanisms of CSS Attribute Selectors
In web development, CSS selectors are fundamental tools for targeting and styling HTML elements. Attribute selectors enable developers to match elements based on their attributes and values, which is particularly useful for dynamically generated or structurally complex IDs. This article uses a specific problem to deeply analyze how to leverage attribute selectors for partial text matching in IDs.
Problem Scenario and Requirements Analysis
Assume we have the following HTML structure with multiple <a> elements whose ID attributes consist of dynamically generated parts and fixed suffixes:
<a id="someGenerated Some:Same:0:name"></a>
<a id="someGenerated Some:Same:0:surname"></a>
<a id="someGenerated Some:Same:1:name"></a>
<a id="someGenerated Some:Same:1:surname"></a>The goal is to select only the <a> elements whose IDs end with "name", i.e., the first and third elements. An initial attempt using a[id*='Some:Same'] selects all four elements because it matches any element with "Some:Same" in its ID, which does not meet the precise requirement.
Solution: Combining Attribute Selectors
The optimal solution is to combine two attribute selectors for more accurate matching:
a[id*='Some:Same'][id$='name']This selector works as follows: first, [id*='Some:Same'] uses the substring matching operator *= to select all <a> elements whose ID attribute value contains the substring "Some:Same". Then, [id$='name'] uses the suffix matching operator $= to further filter elements whose IDs end with "name". Through logical AND combination, it ultimately matches only elements that satisfy both conditions.
Code Example and Step-by-Step Analysis
To illustrate this process more clearly, we provide a complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Initial attempt: match all elements containing "Some:Same" */
a[id*='Some:Same'] {
color: blue;
}
/* Optimized solution: precise match for elements ending with "name" */
a[id*='Some:Same'][id$='name'] {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a id="someGenerated Some:Same:0:name">Name 0</a>
<a id="someGenerated Some:Same:0:surname">Surname 0</a>
<a id="someGenerated Some:Same:1:name">Name 1</a>
<a id="someGenerated Some:Same:1:surname">Surname 1</a>
</body>
</html>In this example, all <a> elements containing "Some:Same" appear in blue, while those also ending with "name" additionally apply red and bold styles. Using browser developer tools, one can verify that only the first and third elements match the red style, achieving precise selection.
Supplementary Knowledge and Performance Considerations
Beyond the *= and $= operators, CSS attribute selectors support other matching patterns:
[id^='value']: Matches elements whose IDs start with a specific value, e.g.,div[id^="element_123"]selects <div> elements with IDs starting with "element_123".[id*='value']: Matches elements whose IDs contain a specific substring, as used in this article.[id$='value']: Matches elements whose IDs end with a specific value, as used in this article.
In practice, combined selectors may add parsing overhead, but modern browsers optimize such operations. It is recommended to prioritize ID or class selectors in complex scenarios, but attribute selectors remain effective for dynamic IDs. For instance, in WebDriver or testing frameworks, these selectors are commonly used to locate dynamically generated elements.
Conclusion and Best Practices
By combining [id*='Some:Same'] and [id$='name'], we achieve precise ID matching based on partial text. This method not only solves the original problem but also demonstrates the flexibility and power of CSS selectors. Developers handling similar scenarios should: 1) clarify matching requirements; 2) choose operators appropriately; 3) test selector performance. This enhances code maintainability and rendering efficiency.