Bộ chọn thuộc tính trong CSS

CSS Atritube Selector là Bộ chọn Thuộc tính chọn các phần tử HTML có thuộc tính cụ thể hoặc thuộc tính với giá trị được chỉ định.

Bộ chọn thuộc tính là gì?

Bộ chọn thuộc tính trong CSS cung cấp một cách dễ dàng và mạnh mẽ để áp dụng các quy tắc CSS lên các phần tử có thuộc tính nhất định.

Điều này có nghĩa là, CSS Selector có thể nhắm đến thông qua thuộc tính “attribute“

Tiếp theo dưới đây mình sẽ mô tả 7 bộ chọn thuộc tính phổ biến nhất.

#1: Bộ chọn [attribute]

Đây là bộ chọn thuộc tính đơn giản nhất. Nó sẽ áp dụng quy tắc CSS cho một phần tử nếu tồn tại một thuộc tính nhất định.

Ví dụ: chúng ta có thể tạo kiểu cho tất cả các phần tử có thuộc tính title bằng cách sử dụng các quy tắc như sau:

[title] {
    color: blue;
}

Bộ chọn [title] trong ví dụ trên khớp với tất cả các phần tử có thuộc tính title.

Bạn cũng có thể hạn chế lựa chọn này đối với một phần tử HTML cụ thể bằng cách đặt bộ chọn thuộc tính sau bộ chọn loại phần tử, như sau:

h1[title] {
    color: red;
}

Bộ chọn h1[title] chỉ khớp với các phần tử h1 có thuộc tính title. Thế nên, thẻ h1 mà không có thuộc tính title thì cũng không được áp dụng quy tắc CSS trên.

#2: Bộ chọn [attribute = “value”]

Bạn có thể sử dụng toán tử = để tạo bộ chọn thuộc tính khớp với bất kỳ phần tử nào có giá trị thuộc tính chính xác bằng giá trị đã cho:

input[type = "submit"] {
    border: 1px solid green;
}

Bộ chọn trong ví dụ trên khớp với tất cả phần tử <input> có thuộc tính type với giá trị bằng submit.

#3: Bộ chọn [attribute ~= “value”]

Thuộc tính của một phần tử HTML cũng có thể có nhiều giá trị.

Bạn có thể sử dụng toán tử ~= để tạo bộ chọn thuộc tính khớp với bất kỳ phần tử nào có giá trị thuộc tính là danh sách các giá trị được phân tách bằng dấu cách (như class = “alert warning”), một trong số đó chính xác bằng giá trị được chỉ định:

HTML:

<p class="warning">Cảnh báo cảnh báo</p>
<p class="warning highlight">Cảnh báo đặc biệt</p>

CSS:

[class ~= "warning"] {
    color: #fff;
    background: red;
}

Bộ chọn này sẽ khớp với bất kỳ phần tử HTML nào có thuộc tính class chứa các giá trị được phân tách bằng dấu cách, một trong số đó là warning.

#4: Bộ chọn [attribute |= “value”]

Bạn có thể sử dụng toán tử |= để tạo bộ chọn thuộc tính khớp với bất kỳ phần tử nào có thuộc tính là danh sách giá trị được phân tách bằng dấu gạch ngang ‘-‘ bắt đầu bằng giá trị được chỉ định:

HTML:

<p lang="en">Tiếng Anh</p>
<p lang="en-us">Tiếng Anh Mỹ</p>
<p lang="us">Tiếng Mẽo</p>

CSS:

[lang |= en] {
    color: #fff;
    background: blue;
}

Bộ chọn trong ví dụ trên khớp với tất cả các phần tử có thuộc tính lang chứa giá trị bắt đầu bằng en, cho dù giá trị đó có được theo sau bởi dấu gạch ngang và nhiều ký tự hơn hay không.

Nói cách khác, nó khớp với các phần tử có thuộc tính lang có các giá trị en, en-US en-GB, v.v. nhưng không phải là US-en, GB-en.

#5: Bộ chọn [attribute ^= “value”]

Bạn có thể sử dụng toán tử ^= để làm cho bộ chọn thuộc tính khớp với bất kỳ phần tử nào có giá trị thuộc tính bắt đầu bằng một giá trị được chỉ định.

Nó không nhất thiết phải là một từ toàn bộ.

HTML:

<a href="https://niithanoi.edu.vn">NIITHANOI.EDU.VN</a>
<a href="https://google.com">GOOGLE.COM</a>
<a href="https://laptrinhvienphp.com">LATRINHVIENPHP.COM</a>

CSS:

a[href ^= "https://"] {
    text-decoration: none;
}

Bộ chọn trong ví dụ trên sẽ nhắm mục tiêu tất cả các liên kết bắt đầu với https:// và bỏ gạch chân đi.

#6: Bộ chọn [attribute $= “value”]

Tương tự, bạn có thể sử dụng toán tử $= để chọn tất cả các phần tử có giá trị thuộc tính kết thúc bằng một giá trị được chỉ định.

Nó không nhất thiết phải là một từ toàn bộ.

a[href $= ".pdf"] {
    color: red;
}

Bộ chọn trong ví dụ trên chọn tất cả các phần tử liên kết đến tài liệu có đuôi là .pdf và đổi màu liên kết thành màu đỏ.

#7: Bộ chọn [attribute *= “value”]

Bạn có thể sử dụng toán tử *= để tạo bộ chọn thuộc tính khớp với tất cả các phần tử có giá trị thuộc tính chứa một giá trị được chỉ định.

HTML:

<p class = "course-java">KHÓA HỌC JAVA</p>
<P class = "course-php">KHÓA HỌC PHP</p>
<p class = "course-python">KHÓA HỌC PYTHON</p>

[class *= "course"] {
    color: #fff;
    background: red;
}

Bộ chọn trong ví dụ trên khớp với tất cả các phần tử HTML với thuộc tính class có giá trị chứa course.

Ví dụ: Bộ chọn này so khớp với các phần tử có thuộc tính class chứa course-java, course-php, course-python, v.v.

Bạn thấy bộ chọn thuộc tính này tiện lợi và dễ sử dụng chứ?

Tuy nhiên, tiện lợi là vậy nhưng bạn không nên lạm dụng nó. Bởi vì bộ chọn càng chính xác, càng ảnh hưởng đến hiệu suất.

Do đó, nó chỉ phù hợp với trường hợp rất đặc biệt.

Học tiếp: Border trong CSS3

Đọc thêm: Thuộc tính Opacity trong CSS