megclaypool of Rootid
1/31/2019 - 11:34 PM
CSS selectors -- match partial class names (and other attributes)!!!
Ok, this is already in a reference file I've got in evernote, but I didn't realize until I went specifically looking for it!
The important thing to note here is that 'class' is an attribute!!!
Substring value attribute selectors
Attribute selectors in this class are also known as "RegExp-like selectors", because they offer flexible matching in a similar fashion to regular expression (but to be clear, these selectors are not true regular expression):
- [attr^=val] : This selector will select all elements with the attribute attr for which the value starts with val.
- [attr$=val] : This selector will select all elements with the attribute attr for which the value ends with val.
- [attr*=val] : This selector will select all elements with the attribute attr for which the value contains the substring val. (A substring is simply part of a string, e.g. "cat" is a substring in the string "caterpillar".)
| Selector | Example | Example Description |
|---|---|---|
[attribute] | [target] | Selects all elements with a target attribute |
[attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
[attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
[attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
[attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
[attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
[attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |