Regular Expressions In CSS3
A regular expression is a sequence of characters that specifies a text match pattern.
Leverage attribute selectors to match patterns within attribute values, effectively emulating some regex functionality.
A regular expression pattern can consist of simple characters or a combination of simple and special characters.
Regular Expressions
Glossary:
Patterns
Characters specifying a text match.
Anchors
Specify position of the match.
Flags
Modify behavior of regular expression.
Methods
Perform operations on strings.
Regular Expression Anchors
| Name | Description | Example |
|---|---|---|
| ^ | Matches the start of the string | [attr^=”value”] |
| $ | Matches the end of the string | [attr$=”value”] |
| Name | Description | Example |
Regular Expression Flags
| Name | Description | Example |
|---|---|---|
| i | Ignore case flag, makes the match case-insensitive | [attr=”value” s] |
| s | Ignore case flag, makes the match case-sensitive | [attr=”value” s] |
| Name | Description | Example |
Regular Expression Pattern
| Name | Description | Example |
|---|---|---|
| * | Matches zero or more occurrences of the preceding element | [attr*=”value”] |
| | | Matches either element | [attr|=”value”] |
| Name | Description | Example |
CSS Regular Expression Snippet
/* REGEX Starts With Value */
a[href^="https://ojamboshop.com/"] {
text-decoration: none;
color: var(--ojamboshop-link-color);
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
}
/* REGEX Ends With Value */
img[src$=".avif"] {
max-width: 100%;
height: auto;
}
/* REGEX Contains Value */
p[lang*="CA"] {
border: 2px solid #0066FF;
padding: 5px;
}
/* REGEX Contains Space Separated Value */
iframe[class~="video-player"] {
aspect-ratio: 16/9;
width: 100%;
height: auto;
}
/* REGEX Contains Hypen Separated Value */
p[lang|="en"] {
background-color:#FFCC33;
}
/* REGEX Case Sensitive */
figcaption[class="CAPTION" s] {
text-shadow: 0.05rem 0.05rem 0.05rem rgba(51,51,51,0.2);
}
/* REGEX Case Insensitive */
figcaption[class="CAPTION" i] {
text-align: center;
font-size: 0.9rem;
}
Usage
- You may use the any IDE or text editor including the Learning JavaScript Course Web IDE in a new browser window.
- Open your web browser.
- Navigate to the URL or drag and drop the HTML file into the web browser.
Open Source
CSS specifications are maintained by the World Wide Web Consortium (W3C) and is licensed under the W3C Software License by web browser vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
Conclusion:
CSS makes it easy to use regular expressions. Use one of several built-in regular expression methods to find a substring within a string.
If you enjoy this article, consider supporting me by purchasing one of my WordPress Ojambo.com Plugins or programming OjamboShop.com Online Courses or publications at Edward Ojambo Programming Books or become a donor here Ojambo.com Donate
References:
- Customer Sets Price Plugin for WooCommerce on Ojambo.com
- Learning JavaScript Course on OjamboShop.com
- Learning Python Course on OjamboShop.com
- Learning PHP Course on OjamboShop.com
- Master Blender Python API Paperback on Amazon
- Master Blender Python API Ebook on Amazon
- Learning JavaScript Paperback on Amazon
- Learning JavaScript Ebook on Amazon
- Learning Python Ebook on Amazon
- Learning PHP Ebook on Amazon
- OjamboServices.com For Custom Websites, Applications & Tutorials
Edward is a software engineer, web developer, and author dedicated to helping people achieve their personal and professional goals through actionable advice and real-world tools.