27.Pseudo-class Trong CSS

Pseudo-class trong CSS là cách để chọn và áp dụng kiểu cho các phần tử trong trạng thái cụ thể hoặc có các tương tác cụ thể. Các pseudo-classes thường được sử dụng với các selector để chọn các phần tử dựa trên các sự kiện như hover, focus, first-child, last-child và nhiều tình huống khác.

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

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Pseudo-Class Example</title>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <button>Click Me</button>
</body>
</html>

CSS (styles.css):

css

ul li:first-child {
  font-weight: bold; /* Chọn phần tử <li> đầu tiên trong <ul> */
}

ul li:last-child {
  color: red; /* Chọn phần tử <li> cuối cùng trong <ul> */
}

ul li:nth-child(odd) {
  background-color: lightgray; /* Chọn các phần tử <li> có thứ tự lẻ trong <ul> */
}

button:hover {
  background-color: yellow; /* Khi hover vào nút, thay đổi màu nền */
}

Trong ví dụ này, chúng ta sử dụng các pseudo-classes khác nhau:

ul li:first-child: Sử dụng pseudo-class :first-child để chọn phần tử <li> đầu tiên trong mỗi danh sách <ul> và thêm kiểu in đậm cho nó.
ul li:last-child: Sử dụng pseudo-class :last-child để chọn phần tử <li> cuối cùng trong mỗi danh sách <ul> và thay đổi màu chữ thành màu đỏ.
ul li:nth-child(odd): Sử dụng pseudo-class :nth-child(odd) để chọn các phần tử <li> có thứ tự lẻ trong mỗi danh sách <ul> và thêm màu nền xám nhạt cho chúng.
button:hover: Sử dụng pseudo-class :hover để áp dụng kiểu cho nút khi người dùng hover chuột lên nút, thay đổi màu nền thành màu vàng.

Các pseudo-class giúp bạn tạo hiệu ứng tương tác và kiểm soát kiểu cho các phần tử dựa trên trạng thái và tương tác cụ thể.

Leave a Comment Cancel Reply