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

Regex 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

Regex 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

Regex Patterns

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

Copy

/* 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