CSS Attr selector

21/05/2019

Bài sau » « Bài trước

Ta có thể style phần tử HTML với attribute hoặc attribute values.

CSS [attribute] selector

Thuộc tính [attribute] selector được dùng để select phần tử HTML với giá trị attribute được chỉ định trong cặp ngoặc vuông [].

Ví dụ bên dưới select tất cả thẻ <a> có attribute target:

a[target] { background-color: yellow; }

<a href="https://www.w3schools.com">w3schools.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

CSS [attribute="value"] selector

Ta có thể chọn phần tử HTML mà có attribute value chính xác như ta mong muốn với cú pháp: [attribute="value"]

a[target="_blank"] { background-color: yellow; }

<a href="https://www.w3schools.com">w3schools.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

Như ví dụ ở trên là chỉ chọn những thẻ <a> có attribute target="_blank".

CSS [attribute~="value"] Selector

Chọn phần tử HTML mà attribute value có chứa từ mà ta mong muốn với cú pháp: [attribute~="value"]

a[title~="flower"] { background-color: yellow; }

<a title="flower" href="https://www.w3schools.com">w3schools.com</a> <a title="flower new" href="http://www.disney.com" target="_blank">disney.com</a> <a title="flowers" href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

Ví dụ ở trên sẽ tìm được những thẻ <a> mà tiêu đề như sau: title="flower", title="summer flower", và title="flower new"; nhưng tiêu đề title="my-flower" hoặc title="flowers" thì không tìm được.

CSS [attribute|="value"] Selector

Chọn phần tử HTML mà attribute value bắt đầu với từ mà ta mong muốn với cú pháp: [attribute|="value"]

Chú ý: Giá trị của attribute phải là 1 từ, từ đơn hoặc nối nhau bằng dấu gạch giữa (-) như class="top" hoặc class="top-text"

a[class|="top"] { background-color: yellow; }

<a class="top" href="https://www.w3schools.com">w3schools.com</a> <a class="topHeader" href="http://www.disney.com" target="_blank">disney.com</a> <a class="top-content" href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

CSS [attribute^="value"] Selector

Chọn phần tử HTML mà attribute value bắt đầu với từ mà ta mong muốn với cú pháp: [attribute^="value"]

Chú ý: Phần này chỉ kiểm tra giá trị bắt đầu trùng khớp là được, không cần phải là 1 chữ hoàn chỉnh như phần [attribute|="value"] ở trên.

a[class^="top"] { background-color: yellow; }

<a class="top" href="https://www.w3schools.com">w3schools.com</a> <a class="topHeader" href="http://www.disney.com" target="_blank">disney.com</a> <a class="top-content" href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

CSS [attribute$="value"] Selector

Chọn phần tử HTML mà attribute value kết thúc với từ mà ta mong muốn với cú pháp: [attribute$="value"]

Chú ý: Không cần phải kết thúc là 1 chữ hoàn chỉnh, chỉ cần có chứa là được.

a[class$="tent"] { background-color: yellow; }

<a class="top" href="https://www.w3schools.com">w3schools.com</a> <a class="topHeader" href="http://www.disney.com" target="_blank">disney.com</a> <a class="top-content" href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

CSS [attribute*="value"] Selector

Chọn phần tử HTML mà attribute value có chứa với từ mà ta mong muốn với cú pháp: [attribute*="value"]

Chú ý: Không cần phải là 1 chữ hoàn chỉnh, chỉ cần có chứa là được.

a[class*="Head"] { background-color: yellow; }

<a class="top" href="https://www.w3schools.com">w3schools.com</a> <a class="topHeader" href="http://www.disney.com" target="_blank">disney.com</a> <a class="top-content" href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

Kết quả hiển thị như sau:

w3schools.com disney.com wikipedia.org

 

Vậy là bài hướng dẫn CSS Attr selector đến đây là kết thúc. Các bạn cần phải nhớ các quy tắc để select attribute này để áp dụng khi cần nhé.

Bài sau » « Bài trước
Back to top