CSS attribute Selector cho phép bạn chọn các phần tử dựa trên thuộc tính của chúng. Chúng đặc biệt hữu ích cho nội dung động hoặc có cấu trúc. Trong đó attributes đóng vai trò quan trọng như trong biểu mẫu hoặc bảng dữ liệu.
Các loại CSS Attribute Selectors
. [attribute] Selector
Selector này tìm tất cả các elements có attribute được chỉ định. Bất kể value của nó là gì.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Styles all elements with a 'placeholder' attribute */
[placeholder] {
border: 2px solid blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">
</body>
</html>
<!--Driver Code Ends-->
. [attribute="value"] Selector
Selector này tìm các phần tử có attribute mà value của nó hoàn toàn giống với value được chỉ định.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Styles the button with type="submit" */
[type="submit"] {
background-color: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</body>
</html>
<!--Driver Code Ends-->
. [attribute~="value"] Selector
Selector này tìm các elements mà attribute's value là một danh sách các từ được phân tách bằng dấu cách. Một trong các từ đó khớp với value được chỉ định.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Styles elements where class includes 'green' */
[class~="green"] {
border: 3px solid red;
}
.box {
height: 100px;
width: 100px;
position: relative;
background-color: green;
}
.container {
display: flex;
height: 500px;
width: 100vw;
gap: 30px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<div class="box large green"></div>
<div class="box small red"></div>
</div>
</body>
</html>
<!--Driver Code Ends-->
. [attribute|="value"] Selector
Selector này tìm các phần tử mà attribute value chính xác là value. Hoặc bắt đầu bằng value theo sau là dấu hyphen (-). Nó thường được dùng cho các language attributes.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Styles elements with lang="en-US" or lang="en-GB" */
[lang|="en"] {
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p lang="en-US">Hello</p>
<p lang="en-GB">Hello</p>
<p lang="fr">Bonjour</p>
</body>
</html>
<!--Driver Code Ends-->
. [attribute^="value"] Selector
Selector này tìm các elements mà attribute value bắt đầu bằng value được chỉ định.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Styles links with href starting with 'https' */
[href^="https"] {
text-decoration: underline;
color: darkgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<a href="https://example.com/">Visit Example</a>
<br>
<a href="mailto:contact@example.com">Email Us</a>
</body>
</html>
<!--Driver Code Ends-->
. [attribute$="value"] Selector
Selector này tìm các elements mà attribute value kết thúc bằng value được chỉ định.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Selects all elements whose class ends with "box" */
[class$="box"] {
border: 2px solid blue;
padding: 10px;
background-color: lightgray;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="small-box">This is a small box</div>
<div class="large-box">This is a large box</div>
<div class="circle">This is not a box</div>
</body>
</html>
<!--Driver Code Ends-->
. [attribute="value"] Selector*
Selector này tìm các elements mà attribute value chứa value được chỉ định ở bất kỳ đâu.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Selects all div elements where class contains "box" */
div[class*="box"] {
background-color: lightgreen;
color: darkgreen;
padding: 20px;
border: 2px solid green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="small-box">This is a small box</div>
<div class="large-box">This is a large box</div>
<div class="circle">This is not a box</div>
</body>
</html>
<!--Driver Code Ends-->
. Combining Attribute Selectors
Bạn có thể kết hợp nhiều multiple attribute selectors để tinh chỉnh mục tiêu của bạn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
/* Styles inputs that are both type="text" and data-required="true" */
[type="text"][data-required="true"] {
background-color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<input type="text" data-required="true">
<input type="password" data-required="true">
</body>
</html>
<!--Driver Code Ends-->
Trường hợp sử dụng thực tế
- Styling Forms Dynamically : Các Attribute selectors rất tốt để nhắm mục tiêu các trường biểu mẫu. Dựa trên các attribute như type, required hoặc disabled.
- Customizing Links : Target links với các href cụ thể. Chẳng hạn như links to external sites hoặc mailto links.
- Language-Specific Styling: Áp dụng style dựa trên language attributes. Lý tưởng cho các trang web đa ngôn ngữ.
- Dynamic Content Styling: Sử dụng data-* attributes cho các hành vi tùy chỉnh. Sử dụng styles trong các ứng dụng nặng về JavaScript.