Bài 31: Cách sử dụng Pseudo-classes trong css

Cách sử dụng Pseudo-classes trong css

Pseudo-classes là các lớp ảo được sử dụng trong CSS để xác định trạng thái hoặc vị trí của một phần tử. Các pseudo-classes được bắt đầu bằng ký tự hai chấm (":") và được áp dụng cho bất kỳ bộ chọn nào.

Dưới đây là một số ví dụ về cách sử dụng pseudo-classes trong CSS:

1. :hover - áp dụng khi con trỏ chuột di chuyển qua một phần tử:

a:hover {
  color: red;
}

Trong ví dụ này, các liên kết (thẻ a) sẽ thay đổi màu sang màu đỏ khi con trỏ chuột di chuyển qua chúng.

2. :active - áp dụng khi một phần tử đang được nhấn:

button:active {
  background-color: #ccc;
}

Trong ví dụ này, các nút (thẻ button) sẽ có màu nền xám nhạt khi được nhấn.

3. :focus - áp dụng khi một phần tử đang được tập trung vào:

input:focus {
  border: 2px solid blue;
}

Trong ví dụ này, khi một trường nhập liệu (thẻ input) được tập trung vào, nó sẽ có đường viền màu xanh lam.

4. :first-child - áp dụng cho phần tử đầu tiên trong một danh sách các phần tử con:

ul li:first-child {
  font-weight: bold;
}

Trong ví dụ này, phần tử đầu tiên (thẻ li) trong một danh sách (thẻ ul) sẽ có kiểu chữ đậm.

5. :nth-child - áp dụng cho phần tử thứ n trong một danh sách các phần tử con:

ul li:nth-child(odd) {
  background-color: #eee;
}

Trong ví dụ này, các phần tử lẻ (thẻ li) trong một danh sách (thẻ ul) sẽ có màu nền xám nhạt.

6. :last-child - áp dụng cho phần tử cuối cùng trong một danh sách các phần tử con:

ul li:last-child {
  border-bottom: 1px solid black;
}

Trong ví dụ này, phần tử cuối cùng (thẻ li) trong một danh sách (thẻ ul) sẽ có đường viền dưới màu đen.

Pseudo-classes là một công cụ mạnh trong CSS, giúp bạn tùy chỉnh giao diện trang web của mình dễ dàng hơn bằng cách xác định trạng thái hoặc vị trí của các phần tử.