CSS [attribute$=value] Selector

Bộ chọn [attribute$="value"] chọn các phần tử có giá trị thuộc tính kết thúc bằng "value". Giá trị không cần là một từ riêng biệt. Nó có thể là một phần của từ hoặc biểu thức khác, nhưng phải ở cuối.

Cú pháp:

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

Ví dụ 1: Trong ví dụ này, chúng ta đang sử dụng thuộc tính đã giải thích ở trên.

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>GeeksforGeeks</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>

Đầu ra: css-attribute-endswith-selector Ví dụ 2: 

html
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS [attribute$=value] Selector
    </title>

    <style>
        [class$=Geeks] {
            border: 5px solid blue;
        }
    </style>
</head>

<body>
    <h2 style="text-align:center">
          [attribute$=value] Selector
      </h2>

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" 
         class="Geeks for Geeks"
         alt="gfg">

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" 
         class="Geeks-Geeks" 
         alt="geeks">

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png" 
         class="GeeksforGeeks" 
         alt="gfg">
</body>
  
</html>

Đầu ra:

 css-attribute-endswith-selector 

Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi [attribute$=value] selector được liệt kê dưới đây:

  • Google Chrome 4.0
  • Internet Explorer 7.0
  • Firefox 3.5
  • Safari 3.2
  • Opera 9.6

Last Updated : 21/07/2025