Có nhiều cách để bạn chọn một thành phần trong HTML. Bạn có thể sử dụng các HTML Attribute Selector để chọn các phần tử HTML có thuộc tính cụ thể, thuộc tính có giá trị cụ thể hoặc thuộc tính bắt đầu hoặc kết thúc bằng một chuỗi cụ thể.
Ví dụ, bạn có thể sử dụng a[target="_blank"] để chọn tất cả các phần tử a có thuộc tính target bằng giá trị _blank. Tương tự, bạn có thể sử dụng input[type="text"] để chọn tất cả các phần tử input có thuộc tính type bằng giá trị text.
Các Selector Attribute rất hữu ích trong việc lựa chọn các phần tử HTML cụ thể để áp dụng CSS. Nó cũng là một trong những cách để tăng tính linh hoạt của CSS trong việc định hình giao diện web.
Mục lục
7 cách HTML attribute selector
[data-value] {
/* Chọn những HTML có attribute này, không quan tâm đến giá trị */
}
[data-value="foo"] {
/* Chọn những HTML có attribute có giá trị là foo */
}
[data-value*="foo"] {
/* Chọn những HTML có attribute có giá trị chứa chữ foo*/
}
[data-value~="foo"] {
/* Chọn những HTML có attribute có giá trị chứa chữ foo riêng biệt*/
}
[data-value^="foo"] {
/* Chọn những HTML có attribute có giá trị bắt đầu bằng chữ foo*/
}
[data-value|="foo"] {
/* Chọn những HTML có attribute có giá trị bắt đầu bằng chữ foo cùng với dấu - */
}
[data-value$="foo"] {
/* Chọn những HTML có attribute có giá trị kết thúc bằng chữ foo*/
}Giải thích
Phân biệt [data-value|="foo"] và [data-value^="foo"]
Cả hai cú pháp [data-value|="foo"] và [data-value^="foo"] đều được sử dụng để chọn các phần tử HTML có thuộc tính data-value bắt đầu bằng chuỗi "foo". Tuy nhiên, có một điểm khác biệt quan trọng giữa hai cú pháp này.
Cú pháp [data-value|="foo"] được sử dụng để chọn các phần tử HTML có thuộc tính data-value bắt đầu bằng chuỗi "foo" trong một danh sách được phân tách bằng dấu gạch ngang “-“. Ví dụ, [data-value|="foo"] sẽ chọn cả phần tử HTML có thuộc tính data-value là "foo-bar" và "foo-baz", nhưng không chọn phần tử HTML có thuộc tính data-value là "foobar".
Còn cú pháp [data-value^="foo"] được sử dụng để chọn các phần tử HTML có thuộc tính data-value bắt đầu bằng chuỗi "foo" mà không quan tâm đến cách phân tách các giá trị trong danh sách. Ví dụ, [data-value^="foo"] sẽ chọn cả phần tử HTML có thuộc tính data-value là "foo-bar", "foo-baz", và "foobar".
Tóm lại, [data-value|="foo"] sẽ chỉ chọn các phần tử HTML có thuộc tính data-value bắt đầu bằng chuỗi "foo" trong một danh sách được phân tách bằng dấu gạch ngang “-“, trong khi [data-value^="foo"] sẽ chọn các phần tử HTML có thuộc tính data-value bắt đầu bằng chuỗi "foo", không quan tâm đến cách phân tách giá trị trong danh sách.
Phân biệt [data-value*="foo"] và [data-value~="foo"]
Cú pháp [data-value*="foo"] được sử dụng để chọn các phần tử HTML có thuộc tính data-value chứa chuỗi "foo" ở bất kỳ vị trí nào trong giá trị thuộc tính. Ví dụ, [data-value*="foo"] sẽ chọn cả phần tử HTML có thuộc tính data-value là "foobar", "barfoo", "foobaz", "bazfoo", và "bazfoobar".
Còn cú pháp [data-value~="foo"] được sử dụng để chọn các phần tử HTML có thuộc tính data-value chứa chuỗi "foo" nhưng chỉ khi nó được phân tách bởi khoảng trắng với các giá trị khác. Ví dụ, [data-value~="foo"] sẽ chọn phần tử HTML có thuộc tính data-value là "foo bar", nhưng sẽ không chọn phần tử HTML có thuộc tính data-value là "foobar".
Tóm lại, [data-value*="foo"] sẽ chỉ chọn các phần tử HTML có thuộc tính data-value chứa chuỗi "foo" ở bất kỳ vị trí nào trong giá trị thuộc tính, trong khi [data-value~="foo"] sẽ chỉ chọn các phần tử HTML có thuộc tính data-value chứa chuỗi "foo" phân tách bởi khoảng trắng với các giá trị khác.
Tổng kết
Trên đây là những kiến thức cơ bản về 7 cách sử dụng HTML attribute selector trong CSS. Việc sử dụng các selector này có thể giúp bạn dễ dàng tìm kiếm và chọn lọc các phần tử trong HTML dựa trên các thuộc tính của chúng.
Điều quan trọng cần nhớ khi sử dụng HTML attribute selector là tìm hiểu kỹ các cú pháp và cách sử dụng của chúng để tránh các lỗi không mong muốn. Nếu bạn chưa quen thuộc với các selector này, hãy tập luyện thường xuyên và tìm hiểu thêm về các ứng dụng và trường hợp sử dụng của chúng.