[attribute^=value]

Định nghĩa và sử dụng

  • "[attribute^=value]" Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng "value".
  • Giá trị bắt đầu bằng "value" có thể là:

    • value
    • abcvalue
    • abc-value
    • abc_value
    • abc-value-def
    • abc_value_def
    • value-abc
    • value_abc
    • valueabc
    • value-abc
    • value_abc

Ghi chú: Màu xanh là màu được chọn.

Cấu trúc

[attribute^=value] {
    property: value; 
}

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p class="test">test</p>
<p class="first_test">first-test</p>
<p class="first-test">first_test</p>
<p class="firsttest">firsttest</p>
<p class="firsttestlast">firsttestlast</p>
<p class="first_test_last">first-test-last</p>
<p class="first-test-last">first_test_last</p>
<p class="test_last">test-last</p>
<p class="test-last">test_last</p>
<p class="testlast">testlast</p>
<p>none</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

test

first-test

first_test

firsttest

firsttestlast

first-test-last

first_test_last

test-last

test_last

testlast

none

CSS viết:

p[class^=test]{
    color: blue;
}

Hiển thị trình duyệt khi đã có css:

test

first-test

first_test

firsttest

firsttestlast

first-test-last

first_test_last

test-last

test_last

testlast

none

Ta thấy những thành phần <p> với thuộc tính class có giá trị bắt đầu bằng test đều đã được chọn.

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

"[attribute^=value]" được hỗ trợ trong đa số các trình duyệt.

Ghi chú:
Không hỗ trợ cho trình duyệt IE6.
Cần khai báo <!DOCTYPE> cho các trình duyệt IE8 trở xuống.