Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Applying a CSS style to an ID element when the beginning of its name stays identical and the end varies in HTML
When you need to apply CSS styles to multiple HTML elements that have IDs with a common beginning but different endings, CSS attribute selectors provide an efficient solution. This technique is particularly useful for dynamically generated content where IDs follow a consistent naming pattern.
Syntax
Following is the syntax for selecting elements with IDs that begin with a specific value −
element[id^="prefix"] {
/* CSS properties */
}
Following is the syntax for selecting elements with IDs that contain a specific substring −
element[id*="substring"] {
/* CSS properties */
}
CSS Attribute Selectors for ID Patterns
CSS provides several attribute selectors to target elements based on their ID patterns. The most commonly used selectors for this purpose are the begins with (^=) and contains (*=) selectors.
Using the Begins With Selector (^=)
The ^= selector targets elements whose ID attribute begins with the specified value. This is the most precise method for selecting elements with a common ID prefix.
Example
Following example demonstrates styling multiple elements with IDs starting with "post-" −
<!DOCTYPE html>
<html>
<head>
<title>CSS Begins With Selector</title>
<style>
div[id^="post-"] {
background-color: #f0f8ff;
border: 2px solid #4169e1;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<div id="post-1">This is post 1</div>
<div id="post-featured">This is a featured post</div>
<div id="post-recent">This is a recent post</div>
<div id="my-post">This post won't be styled</div>
</body>
</html>
The output shows that only the divs with IDs beginning with "post-" are styled −
This is post 1 (light blue background, blue border) This is a featured post (light blue background, blue border) This is a recent post (light blue background, blue border) This post won't be styled (no styling applied)
Using the Contains Selector (*=)
The *= selector targets elements whose ID attribute contains the specified substring anywhere within the value. This selector provides broader matching capabilities.
Example
Following example shows how the contains selector works with different ID patterns −
<!DOCTYPE html>
<html>
<head>
<title>CSS Contains Selector</title>
<style>
div[id*="article"] {
background-color: #fff5ee;
border-left: 4px solid #ff6347;
padding: 12px;
margin: 8px 0;
font-weight: bold;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<div id="article-1">Main Article 1</div>
<div id="featured-article">Featured Article</div>
<div id="blog-article-recent">Recent Blog Article</div>
<div id="news-item">News Item (no styling)</div>
</body>
</html>
The contains selector matches all divs with "article" anywhere in their ID −
Main Article 1 (peach background, red left border, bold) Featured Article (peach background, red left border, bold) Recent Blog Article (peach background, red left border, bold) News Item (no styling) (no styling applied)
Comparison of Selector Methods
Following table compares the different CSS attribute selectors for targeting ID patterns −
| Selector | Description | Example | Matches |
|---|---|---|---|
div[id^="post-"] |
ID begins with "post-" | post-1, post-home | Only IDs starting with the exact prefix |
div[id*="post"] |
ID contains "post" | post-1, my-post, blog-post-home | Any ID containing the substring |
div[id$="post"] |
ID ends with "post" | my-post, blog-post | Only IDs ending with the exact suffix |
div[id="post"] |
ID exactly equals "post" | post | Only exact matches |
Practical Use Case
This technique is commonly used in content management systems, blogs, and dynamic websites where elements are generated with systematic ID naming conventions.
Example − Blog Post Layout
<!DOCTYPE html>
<html>
<head>
<title>Blog Post Styling</title>
<style>
article[id^="blog-"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
article[id^="blog-"] h3 {
margin-top: 0;
font-size: 1.4em;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<article id="blog-tech-news">
<h3>Latest Technology News</h3>
<p>Stay updated with the latest in technology.</p>
</article>
<article id="blog-web-development">
<h3>Web Development Tips</h3>
<p>Learn modern web development techniques.</p>
</article>
<article id="news-item">
<h3>Regular News (No Styling)</h3>
<p>This article doesn't match the blog- pattern.</p>
</article>
</body>
</html>
Only the articles with IDs starting with "blog-" receive the gradient styling and enhanced appearance.
Latest Technology News (gradient background, white text, styled) Web Development Tips (gradient background, white text, styled) Regular News (No Styling) (plain appearance, no special styling)
Best Practices
Use
^=when you need precise matching from the beginning of the ID.Use
*=when you need flexible matching anywhere within the ID.Establish consistent ID naming conventions in your projects for easier styling.
Be specific with your selectors to avoid unintended matches.
Test your selectors with various ID patterns to ensure they work as expected.
Conclusion
CSS attribute selectors like ^= and *= provide powerful tools for styling elements with similar ID patterns. The ^= selector is ideal when IDs share a common prefix, while *= offers broader matching for IDs containing specific substrings. Both methods help maintain clean, efficient CSS when working with dynamically generated content.
144 Views
