Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS | [attribute$=value] Selector

Improve Article
Save Article
  • Last Updated : 08 Jan, 2019
Improve Article
Save Article

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.


[attribute$="value"] {
    // CSS property

Example 1:

<!DOCTYPE html> 
            [class$="str"] {
                background: green; 
                color: white; 
            h1 { 
            body { 
        <!-- 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


Example 2:

<!DOCTYPE html>
            CSS [attribute$=value] Selector
            [class$=Geeks] {
                border: 5px solid blue; 
        <h2 style = "text-align:center">[attribute$=value] Selector</h2>
        <img src=
        class="Geeks for Geeks" alt="gfg">
        <img src=
        class="Geeks-Geeks" alt="geeks"
        <img src=
        class="GeeksforGeeks" alt="gfg">


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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!