How HTMLApplying a CSS Style to an ID Element When the Beginning of Its Name Stays Identical and the End Varies in HTML
In web development, it’s common to encounter scenarios where you need to apply consistent styling to elements that share a common prefix in their ID but have different suffixes. This can be particularly useful when you’re dynamically generating content and want to style elements similarly without having to write individual CSS rules for each unique ID.
In this article, we’ll explore how to apply CSS styles to HTML elements that have IDs with a common beginning but varying endings. We’ll go through several examples that demonstrate how to achieve this using different methods, including CSS attribute selectors and JavaScript.
Using CSS Attribute Selectors
CSS attribute selectors provide a way to select elements based on the presence or value of their attributes. In the case of ID attributes, we can use the ^= operator to match elements whose ID attribute value begins with a specific string.
Example 1: Basic Attribute Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 1: Basic Attribute Selector</title>
<style>
[id^="prefix-"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div id="prefix-123">Visit how2html.com for more examples.</div>
<div id="prefix-abc">Learn more at how2html.com.</div>
<div id="unrelated">This element is not styled.</div>
</body>
</html>
Output:
Example 2: Combining with Other Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 2: Combining with Other Selectors</title>
<style>
section [id^="prefix-"] {
background-color: lightgrey;
padding: 10px;
}
</style>
</head>
<body>
<section>
<div id="prefix-456">Check out how2html.com for tutorials.</div>
<div id="prefix-def">Visit how2html.com for resources.</div>
</section>
<div id="prefix-ghi">This element is outside the section and not styled.</div>
</body>
</html>
Output:
Example 3: Using Multiple Attribute Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 3: Using Multiple Attribute Selectors</title>
<style>
[id^="prefix-"][id$="-suffix"] {
border: 2px solid red;
display: inline-block;
margin: 5px;
}
</style>
</head>
<body>
<span id="prefix-789-suffix">Explore how2html.com</span>
<span id="prefix-xyz-suffix">Discover articles at how2html.com</span>
<span id="prefix-only">This element does not have the suffix.</span>
</body>
</html>
Output:
Using JavaScript to Apply Styles
Sometimes, you may want to apply styles dynamically using JavaScript. This can be done by selecting elements with a specific ID pattern and then adding a class or directly modifying their style properties.
Example 4: Adding a Class with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 4: Adding a Class with JavaScript</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
window.onload = function() {
var elements = document.querySelectorAll('[id^="prefix-"]');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add('highlight');
}
};
</script>
</head>
<body>
<p id="prefix-101">Visit how2html.com for coding tips.</p>
<p id="prefix-202">Learn HTML at how2html.com.</p>
<p id="other">This paragraph is not highlighted.</p>
</body>
</html>
Output:
Example 5: Directly Modifying Style with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 5: Directly Modifying Style with JavaScript</title>
<script>
window.onload = function() {
var elements = document.querySelectorAll('[id^="prefix-"]');
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = 'green';
elements[i].style.fontStyle = 'italic';
}
};
</script>
</head>
<body>
<p id="prefix-303">Check how2html.com for web development.</p>
<p id="prefix-404">how2html.com is your HTML resource.</p>
<p id="another">This paragraph won't be styled.</p>
</body>
</html>
Output:
Example 6: Toggling Styles with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 6: Toggling Styles with JavaScript</title>
<style>
.toggled {
text-decoration: underline;
}
</style>
<script>
function toggleStyle() {
var elements = document.querySelectorAll('[id^="prefix-"]');
for (var i = 0; i < elements.length; i++) {
elements[i].classList.toggle('toggled');
}
}
</script>
</head>
<body>
<button onclick="toggleStyle()">Toggle Style</button>
<p id="prefix-505">Visit how2html.com for tutorials.</p>
<p id="prefix-606">how2html.com has great examples.</p>
<p id="different">This paragraph won't be toggled.</p>
</body>
</html>
Output:
Advanced CSS Techniques
For more complex scenarios, you might need to use advanced CSS techniques such as combining pseudo-classes or using CSS variables.
Example 7: Using Pseudo-Classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 7: Using Pseudo-Classes</title>
<style>
[id^="prefix-"]:hover {
background-color: pink;
}
</style>
</head>
<body>
<a id="prefix-707" href="http://how2html.com">Hover over me!</a>
<a id="prefix-808" href="http://how2html.com">I change color on hover too!</a>
<a id="no-prefix">I don't change on hover.</a>
</body>
</html>
Output:
Example 8: Using CSS Variables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 8: Using CSS Variables</title>
<style>
:root {
--main-color: coral;
}
[id^="prefix-"] {
color: var(--main-color);
font-size: 1.2em;
}
</style>
</head>
<body>
<div id="prefix-909">how2html.com uses CSS variables.</div>
<div id="prefix-1010">Styling with how2html.com and CSS variables.</div>
<div id="no-variable">This div doesn't use the CSS variable.</div>
</body>
</html>
Output:
Conclusion
In this article, we’ve covered how to apply a CSS style to an ID element when the beginning of its name stays identical and the end varies. We’ve looked at using CSS attribute selectors, JavaScript, and advanced CSS techniques to achieve this goal. By using these methods, you can efficiently style multiple elements that share a common ID prefix without having to write individual rules for each one.
Remember that while these techniques are powerful, they should be used judiciously to maintain readability and manageability of your code. Always consider the best approach for your specific use case and strive for a balance between efficiency and clarity.