Pseudo-classes và Pseudo-elements trong CSS

Bài học này cung cấp kiến thức cơ bản về Pseudo-classes và Pseudo-elements trong CSS, giúp bạn áp dụng các hiệu ứng và trang trí nâng cao cho website.

1. Pseudo-classes

Pseudo-classes là cách để chọn và áp dụng kiểu cho các trạng thái đặc biệt của phần tử HTML. Các ví dụ phổ biến:

a. :hover

• Kích hoạt khi người dùng di chuột qua phần tử.

button:hover {
  background-color: lightblue;
  color: white;
}

b. :focus

• Kích hoạt khi phần tử nhận được tiêu điểm (focus), ví dụ như khi nhấn vào input.

input:focus {
  border-color: blue;
  outline: none;
}

c. :nth-child()

• Chọn các phần tử con dựa trên thứ tự của chúng.

li:nth-child(odd) {
  background-color: #f2f2f2;
}
li:nth-child(even) {
  background-color: #ccc;
}

d. :nth-of-type()

• Chọn các phần tử dựa trên kiểu và thứ tự của chúng.

p:nth-of-type(2) {
  font-weight: bold;
}

2. Pseudo-elements

Pseudo-elements cho phép bạn tạo các phần tử ảo để trang trí nội dung mà không cần thêm HTML.

a. ::before

• Thêm nội dung hoặc trang trí trước nội dung của phần tử.

h1::before {
  content: "\2605 ";
  color: gold;
}

b. ::after

• Thêm nội dung hoặc trang trí sau nội dung của phần tử.

h1::after {
  content: " \2605";
  color: gold;
}

3. So sánh Pseudo-classes và Pseudo-elements

Thực hành

Bài tập 1: Tạo hiệu ứng hover cho button

Tạo hiệu ứng khi người dùng di chuột qua nút.

<button>Hover me!</button>
<style>
  button {
    background-color: gray;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
  }

  button:hover {
    background-color: black;
  }
</style>

Bài tập 2: Trang trí tiêu đề bằng Pseudo-elements

Thêm biểu tượng trước và sau tiêu đề.

<h1>CSS Rocks!</h1>
<style>
  h1::before {
    content: "\1F4DA "; /* Icon */
  }
  h1::after {
    content: " \1F525"; /* Icon */
  }
</style>

Kết luận

Pseudo-classes và Pseudo-elements là công cụ mạnh mẽ trong CSS, giúp bạn tạo các hiệu ứng trực quan và tối ưu hóa việc viết mã mà không cần thay đổi HTML. Hãy áp dụng linh hoạt để cải thiện giao diện website của bạn!