CSS Regular Expression

On 5 minutes, 2 seconds read By Edward
CSS Styling Regular Expressions

Live stream set for 2025-06-08 at 14:00:00 Eastern

Ask questions in the live chat about any programming or lifestyle topic.

This livestream will be on YouTube or you can watch below.

Regular Expressions In JavaScript

A regular expression is a sequence of characters that specifies a text match pattern.

There are two ways to create regular expressions in JavaScript. The first is literal notation and the second is RegExp constructor.

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

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

No CSS Styling
Plain HTML Output Without CSS Styling

CSS Regular Expression Result
HTML Output With CSS Regular Expression Result


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:

Leave a Reply

Your email address will not be published. Required fields are marked *