Have you ever found yourself in a situation where you wanted to style a specific set of elements on a page, but struggled to select them with traditional CSS selectors? If so, CSS Substring Matching, also known as attribute selectors, may be just what you need.
CSS Substring Matching is a powerful feature that enables you to select elements based on the value of their attributes. This provides a more granular level of control over your styling, allowing you to target specific groups of elements and make styling decisions based on the contents of their attributes.
There are several different types of substring matching selectors in CSS, including:
| Substring matching | example | |
|---|---|---|
| Starting with | ^= | [class^='sa'] |
| Containing with | *= | [class*='sa'] |
| Ending with | $= | [class$='sa'] |
| Exactly equal with | = | [class='sa'] |
1. Starting with, for eg: [class^='sa']
Select every <p> which contains a class name starting with 'sa'
<head>
<style>
p[class^='sa'] {
color: red;
}
</style>
</head>
<body>
<p class="sa_1">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="sa_2">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="123sa">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
Result:
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Containing with, for eg: [class*='sa']
Select every <p> which contains a class name containing with text 'sa'
<head>
<style>
p[class*='sa'] {
color: orchid;
}
</style>
</head>
<body>
<p class="sa_1">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="sa_2">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="123sa">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
Result:
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Ending with, for eg: [class$='sa']
Select every <p> which contains a class name ending with text 'sa'
<head>
<style>
p[class$='sa'] {
color: orange;
}
</style>
</head>
<body>
<p class="sa_1">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="sa_2">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="123sa">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
Result:
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4. Exactly equal with, for eg: a[href="abc.pdf
href="abc.pdfSelect every <a> which contains a href attributes which exactly equal with text 'abc.pdf'
<head>
<style>
a[href="abc.pdf"] {
background: purple;
}
</style>
</head>
<body>
<a href="abc.pdf">pdf 1</a><br/>
<a href="abcd.pdf">pdf 2</a>
</body>
Result:
More Examples:
1. [attr*="app"] to target elements that contain text "app" in its attr.
<head>
<style>
[attr*="app"] {
background: purple;
}
</style>
</head>
<body>
<p attr="apple">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p attr="banana">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p attr="orange">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
2. a[href$=".html"] to target <a> elements that included a href attribute that ends with the text ".html".
<head>
<style>
a[href$=".html"] {
background: purple;
}
</style>
</head>
<body>
<a href="https://uipencil.com/">link 1</a>
<a href="https://uipencil.com/hello.html">link 2</a>
</body>
3. [id^="s_"] to target elements that included an id name that starts with "s_"
<head>
<style>
p[id^="s_"] {
background: purple;
}
</style>
</head>
<body>
<p id="s_1">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="s_1">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="m_1">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
ui pencil 
Leave a Reply