CSS [attribute$=value] Selector
The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value “value”. The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end.
Syntax:
[attribute$="value"] { // CSS property }
Example 1: In this example, we are using the above-explained property.
html
<!DOCTYPE html> < html > < head > < style > [class$="str"] { background: green; color: white; } h1 { color: green; } body { text-align: center; width: 60%; } </ style > </ head > < body > < h1 >w3wiki</ h1 > <!-- All items ending with str are highlighted --> < div class = "firststr" >The first div element.</ div > < div class = "stsecondstr" >The second div element.</ div > < div class = "start" >The third div element.</ div > < p class = "mystr" >This is some text in a paragraph.</ p > </ body > </ html > |
Output:
Example 2:
html
<!DOCTYPE html> < html > < head > < title > CSS [attribute$=value] Selector </ title > < style > [class$=Beginner] { border: 5px solid blue; } </ style > </ head > < body > < h2 style = "text-align:center" > [attribute$=value] Selector </ h2 > < img src = "https://media.w3wiki.net/wp-content/uploads/w3wiki-logo.png" class = "Beginner for Beginner" alt = "gfg" > < img src = "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png" class = "Beginner-Beginner" alt = "Beginner" > < img src = "https://media.w3wiki.net/wp-content/uploads/w3wiki-10.png" class = "w3wiki" alt = "gfg" > </ body > </ html > |
Output:
Supported Browsers: The browser supported by [attribute$=value] selector are listed below:
- Google Chrome 4.0
- Internet Explorer 7.0
- Firefox 3.5
- Safari 3.2
- Opera 9.6
Contact Us