Selectors thuộc tính trong CSS

1. Các loại selectors thuộc tính

Selectors thuộc tính trong CSS cho phép bạn chọn các phần tử HTML dựa trên giá trị của các thuộc tính như id, class, name, type, và các thuộc tính khác. Nó mang lại sự linh hoạt và độ chính xác trong việc chọn phần tử, đặc biệt hữu ích cho việc tạo style cho các phần tử form, liên kết, và các phần tử khác với thuộc tính độc nhất. Ở bài viết này, chúng ta sẽ tìm hiểu về các loại selectors thuộc tính khác nhau và cách sử dụng.

Selectors thuộc tính được chia thành một số loại, cho phép chọn phần tử dựa trên sự tồn tại của thuộc tính, giá trị chính xác của nó hoặc một phần giá trị. Các loại chính của selectors thuộc tính:

1. Selector thuộc tính: chọn các phần tử có một thuộc tính nhất định, bất kể giá trị của nó.
2. Selector thuộc tính với giá trị: chọn các phần tử với thuộc tính có giá trị bằng một giá trị cụ thể.
3. Selector thuộc tính với giá trị bắt đầu: chọn các phần tử mà giá trị thuộc tính bắt đầu bằng một tiền tố cụ thể.
4. Selector thuộc tính với giá trị kết thúc: chọn các phần tử mà giá trị thuộc tính kết thúc bằng một hậu tố cụ thể.
5. Selector thuộc tính chứa giá trị: chọn các phần tử mà giá trị thuộc tính chứa một chuỗi con cụ thể.
6. Selector thuộc tính với phân tách khoảng trắng: chọn các phần tử với thuộc tính chứa một từ cụ thể, được phân tách bằng khoảng trắng.
7. Selector thuộc tính với phân tách dấu gạch ngang: chọn các phần tử với thuộc tính chứa một từ cụ thể, được phân tách bằng dấu gạch ngang.

2. Selector thuộc tính (Attribute Selector)

Selector thuộc tính chọn các phần tử có một thuộc tính nhất định, bất kể giá trị của nó. Selector này hữu ích khi bạn cần chọn tất cả các phần tử với một thuộc tính cụ thể.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

Trong ví dụ này, tất cả các phần tử <input> với thuộc tính type sẽ có viền đen, bất kể giá trị của thuộc tính đó.

3. Selector thuộc tính với giá trị

Selector thuộc tính với giá trị chọn các phần tử có thuộc tính bằng với một giá trị cụ thể. Điều này hữu ích khi cần chọn các phần tử với một giá trị thuộc tính cụ thể, ví dụ như tất cả các trường văn bản hoặc liên kết mở trong một tab mới.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Chỉ trường văn bản <input type="text"> sẽ có nền màu xám nhạt.

4. Selector thuộc tính với giá trị bắt đầu

Selector thuộc tính với giá trị bắt đầu chọn các phần tử mà giá trị thuộc tính bắt đầu bằng một tiền tố cụ thể. Tiền tố được chỉ định sau ký tự ^=. Selector này hữu ích, ví dụ, để chọn tất cả các liên kết dẫn đến một trang web cụ thể.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">Liên kết đến example.com</a>
<a href="https://another.com">Liên kết khác</a>
    
  

Chỉ liên kết đầu tiên sẽ được tô màu xanh lá, vì nó bắt đầu bằng "https://example.com".

5. Selector thuộc tính với giá trị kết thúc

Selector thuộc tính với giá trị kết thúc chọn các phần tử mà giá trị thuộc tính kết thúc bằng một hậu tố cụ thể. Hậu tố được chỉ định sau ký tự $=. Selector này hữu ích để chọn các file có loại cụ thể, ví dụ, hình ảnh định dạng .png.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Hình ảnh 1">
<img src="image2.jpg" alt="Hình ảnh 2">
    
  

Chỉ các hình ảnh với định dạng .png sẽ có viền màu xanh lam.

6. Selector thuộc tính chứa giá trị

Selector thuộc tính chứa giá trị chọn các phần tử mà giá trị thuộc tính chứa một chuỗi con cụ thể. Chuỗi con được chỉ định sau ký tự *=. Selector này hữu ích khi cần chọn các phần tử với thuộc tính chứa một phần giá trị cụ thể, ví dụ, liên kết đến một phần cụ thể của trang web.

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Liên kết đến phần 1</a>
<a href="https://example.com/about">Về chúng tôi</a>
<a href="https://example.com/section2">Liên kết đến phần 2</a>
    
  

Chỉ các liên kết chứa "section" trong href sẽ được in đậm.

7. Selector thuộc tính với phân tách khoảng trắng

Selector thuộc tính với phân tách khoảng trắng chọn các phần tử có giá trị thuộc tính chứa một từ cụ thể, được phân tách bằng khoảng trắng. Selector này sử dụng ký tự ~=. Nó thường được sử dụng để chọn các phần tử với các lớp cụ thể hoặc các thuộc tính khác chứa nhiều giá trị phân tách bằng khoảng trắng.

    
[class~="featured"] {
  background-color: yellow;
}
    
  

    
<div class="featured item">Phần tử với lớp "featured"</div>
<div class="item">Phần tử thông thường</div>
<div class="highlight featured">Phần tử khác với lớp "featured"</div>
    
  

Chỉ các phần tử chứa featured trong danh sách lớp sẽ có nền màu vàng.

8. Selector thuộc tính với phân tách dấu gạch ngang

Selector thuộc tính với phân tách dấu gạch ngang chọn các phần tử có giá trị thuộc tính bắt đầu bằng một giá trị cụ thể và có thể được bổ sung qua dấu gạch ngang. Selector sử dụng ký tự |= để chọn các phần tử có giá trị bằng giá trị được chỉ định hoặc bắt đầu bằng nó và được phân tách bằng dấu gạch ngang.

    
[lang|="en"] {
  color: blue;
}
    
  

    
<p lang="en">Văn bản bằng tiếng Anh</p>
<p lang="en-us">Văn bản bằng tiếng Anh (biến thể Mỹ)</p>
<p lang="fr">Văn bản bằng tiếng Pháp</p>
    
  

Chỉ các phần tử với thuộc tính lang bằng "en" hoặc bắt đầu bằng "en-", ví dụ, "en-us", sẽ được tô màu xanh lam.