This are attribute selectors which provide selecting matching strings in the value of an attribute.
These CSS3 selectors already occurred less powerful as attribute selectors in CSS2.
# Prefix
The prefix attribute selector matches an element whose attribute value (which should not be empty) starts with the prefix value.
# Syntax
Copy
[attribute^=value] {
/* declarations */
}
# Example
Copy
a[href^="https://"] {
border-bottom: 1px solid red;
}
Here will have all https:// links a red bottom border.
# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (1.0)
Yes (3.0)
Yes (1.0)
Yes (12.0)
Yes (8.0)
Yes (9.5)
# Suffix
The suffix attribute selector selects an element whose attribute value (which shouldn't be empty) ends with the suffix value.
# Syntax
Copy
[attribute$=value] {
/* declarations */
}
# Example
Copy
a[href$=".pdf"] {
border-bottom: 1px solid red;
}
Every link with the ending of .pdf will have a red bottom border.
# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (1.0)
Yes (3.0)
Yes (1.0)
Yes (12.0)
Yes (8.0)
Yes (9.5)
# Contains
The contains attribute selector matches any element whose attribute value contains the given value at least once.
# Syntax
Copy
[attribute*=value] {
/* declarations */
}
# Example
Copy
[title*="example"] {
border: 1px dashed blue;
}
Every element which contains the value example get a dashed blue border.
# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (1.0)
Yes (3.0)
Yes (1.0)
Yes (12.0)
Yes (8.0)
Yes (9.5)
Please wait a moment, the comments start loading now...