CSS wildcard or CSS Regular expression? – You may be looking for CSS Attribute Selector.
CSS Attribute Selector – Here’s the scenario: You want to add styling to all elements that have “read” in the name of the class.
For instance: Below classes have some of the same wording.
mark-as-unread
mark-as-reading
mark-as-read
mark-as-not-interested
In CSS, selectors are patterns used to select the element(s) you want to style. If you are looking for a CSS wildcard or CSS Regular expression then what you might be trying to find is a CSS Attribute Selector.
CSS Attribute Selector – HTML – for CSS Wildcard
*note the space after “-read ” for book 3.
<div class="mark-as-unread otherClass"> Book 1 </div>
<div class="mark-as-reading otherClass"> Book 2 </div>
<div class="mark-as-read otherClass"> Book 3 </div>
<div class="mark-as-not-interested otherClass"> Book 4 </div>CSS Attribute Selector – CSS – for CSS Wildcard
div[class*='-read'] {color:blue; }
div[class*='-read '] {text-decoration:line-through;}
div[class*='mark-as'] {font-style:italic; }
.otherClass {font-size:200%;}CSS Wildcard or CSS Selectors to note
- ^ – matches if the attribute begins with the given string
- $ – matches if the attribute ends with the given string
- * – matches any part of the attribute value that contains given string
CSS Selectors List / CSS Wildcard Table
| Selector | Example | Example description | CSS |
|---|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute | 2 |
| [attribute=value] | [target=_blank] | Selects all elements with target=”_blank” | 2 |
| [attribute~=value] | [title~=nickfever] | Selects all elements with a title attribute containing the word “nickfever” | 2 |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with “en” | 2 |
| [attribute^=value] | a[src^=”https”] | Selects every <a> element whose src attribute value begins with “https” | 3 |
| [attribute$=value] | a[src$=”.pdf”] | Selects every <a> element whose src attribute value ends with “.pdf” | 3 |
| [attribute*=value] | a[src*=”nickfever”] | Selects every <a> element whose src attribute value contains the substring “nickfever” | 3 |
