Top 10 Pseudo-Class trong CSS - CFD Circle

Pseudo-Class :focus trong CSS.

Pseudo-Class trong CSS là gì?

Các pseudo-class trong CSS là những từ khóa đặc biệt được thêm vào bộ chọn CSS để định dạng một trạng thái cụ thể của phần tử HTML. Nói cách khác, chúng cho phép bạn tạo kiểu cho các phần tử dựa trên hành vi của người dùng hoặc trạng thái của phần tử đó.

Pseudo-Class trong CSS được sử dụng để xác định trạng thái đặc biệt của một phần tử. Chúng có thể được kết hợp với bộ chọn CSS để thêm hiệu ứng cho các phần tử hiện có dựa trên trạng thái của chúng.
Ví dụ, bạn có thể thay đổi kiểu của một phần tử khi người dùng di chuột qua nó, hoặc khi một liên kết được truy cập. Tất cả những điều này đều có thể đạt được bằng cách sử dụng Pseudo-Class trong CSS.

Key takeaway:

• Pseudo-Class là công cụ mạnh mẽ giúp bạn tạo kiểu cho element dựa trên trạng thái của chúng.

• Nắm vững các Pseudo-Class cơ bản và nâng cao để tạo hiệu ứng ấn tượng và tương tác với người dùng.

• Sử dụng Pseudo-Class hợp lý để nâng tầm giao diện website và tạo trải nghiệm người dùng tốt hơn.

1. :hover Pseudo-class:

Pseudo-Class :hover được dùng để thêm hiệu ứng đặc biệt cho một phần tử khi chúng ta di chuột qua nó. Ví dụ bên dưới minh họa việc khi con trỏ chuột di vào vùng hộp, màu nền của nó sẽ đổi.

Thí dụ: Cùng xem ví dụ này cho thấy cách sử dụng Pseudo-Class :hover trong CSS.

2. :active Pseudo-class:

Pseudo-Class :active được sử dụng để chọn một phần tử đang được kích hoạt khi người dùng nhấp chuột vào nó. Ví dụ, khi bạn nhấp chuột vào link, màu nền của nó sẽ thay đổi trong một khoảnh khắc.

3. :focus Pseudo-Class

Pseudo-Class :focus được sử dụng để chọn một phần tử đang được người dùng tập trung vào. Nó hoạt động trên các thành phần nhập liệu của người dùng được sử dụng trong form và kích hoạt ngay khi người dùng nhấp vào chúng. Trong ví dụ sau, màu nền của trường nhập liệu đang được chọn (focus) sẽ thay đổi.

Thí dụ: Cùng xem ví dụ này cho thấy cách sử dụng Pseudo-Class :focus trong CSS.

4. :visited Pseudo-class:

Pseudo-Class :visited được sử dụng để chọn các liên kết đã được người dùng truy cập. Trong ví dụ sau, màu sắc của liên kết sẽ thay đổi sau khi nó được truy cập.

Thí dụ: Cùng xem ví dụ này cho thấy cách sử dụng Pseudo-Class :visited trong CSS.

5. :not Pseudo-class:

Pseudo-Class :not được dùng để chọn các phần tử không khớp với một element cụ thể.

Thí dụ: Cùng xem ví dụ sau, Pseudo-Class :not được sử dụng để chọn tất cả các thẻ không phải thẻ p . Màu sắc của các thẻ này sẽ được đặt thành màu đỏ.

6. :disabled Pseudo-class:

Pseudo-Class :disabled được dùng để chọn các phần tử đang trong trạng thái disabled, thường sử dụng trong form

Thí dụ: Cùng xem ví dụ sau, Pseudo-Class :disabled được sử dụng để trỏ vào các phần tử input đang có trạng thái disabled và cho phần tử đó có background màu trắng nhạt.

7. :first-child Pseudo-class:

Pseudo-Class :first-child được dùng để chọn phần tử đầu tiên trong danh sách các phần tử cha.

Thí dụ: Cùng xem ví dụ sau, Pseudo-Class :first-child được sử dụng để trỏ vào phần tử đầu tiên trong cách danh sách dưới đây. 

8. :last-child Pseudo-class:

Pseudo-Class :last-child được dùng để chọn phần tử cuối cùng trong danh sách các phần tử cha.

Thí dụ: Cùng xem ví dụ sau, Pseudo-Class :last-child được sử dụng để trỏ vào cuối cùng trong cách danh sách dưới đây.

9. :nth-child() Pseudo-class:

Pseudo-Class :nth-child(n) được dùng để chọn phần tử con đúng số thứ tự nth child của phần tử cha.

n có thể là số, số chẵn số lẻ, hoặc là một phép tính 

Thí dụ: Cùng xem ví dụ sau, Pseudo-Class :nth-child(n)

10. :nth-last-child() Pseudo-class:

Pseudo-Class :nth–last-child(n) được dùng để chọn phần tử con đúng số thứ tự nth child của phần tử cha đếm từ phần cuối cùng trở về.

n có thể là số, số chẵn số lẻ, hoặc là một phép tính 

Thí dụ: Cùng xem ví dụ sau, Pseudo-Class :nth-last-child(n)

Tổng kết bài viết

Trên đây là tổng hợp 10 Pseudo-class tương đối phổ biến trong lộ trình trở thành 1 Front-end Developer . Để nắm vững các kiến thức trên chúng ta cần phải tập luyện sử dụng ở các dự án cá nhân và các dự án có mức độ phức tạp và chuyên sâu sử dụng Pseudo-class. Từ đó rút ra kinh nghiệm thực tế và tăng thêm kỹ năng của chúng ta.
Pseudo-Class là công cụ mạnh mẽ giúp bạn áp dụng kiểu cho element dựa trên trạng thái của chúng. Nắm vững kiến thức và sử dụng Pseudo-Class hiệu quả giúp bạn nâng tầm website và tạo ấn tượng tốt với người dùng hơn.

Lời khuyên:

• Tham khảo chi tiết Lộ Trình Front-end 2024 để biết thêm các kỹ năng cần có của Front-end Developer -> Link tới bài viết

• Tham gia cộng đồng web developer để trao đổi kiến thức và kinh nghiệm về pseudo-class.

• Luyện tập sử dụng pseudo-class trong các dự án thực tế để nâng cao kỹ năng.

• Sử dụng các pseudo-class nâng cao và phức tạp để tập luyện.
  
  

Chúc bạn thành công!