Lớp giả css

Thuộc tính Pseudo Class và Pseudo Element trong CSS web lập trình thường rất dễ bị nhầm lẫn, kể cả một số bạn lập trình viên đã đi đôi khi vẫn không phân biệt rõ ràng được. Vì vậy để giúp các bạn-những người học lập trình web có thể nhận biết được sự khác nhau giữa hai thuộc tính Pseudo Class và Pseudo Element để chọn đúng thuộc tính phù hợp áp dụng vào web. Anh đã có bài chia sẻ về Pseudo Element, các bạn có thể xem tại đây. Và trong bài viết này, anh sẽ chia sẻ về Pseudo Class. Hi vọng qua 2 bài viết này, các bạn sẽ hiểu rõ 2 thuộc tính và áp dụng được vào web mà không bị nhầm lẫn nữa

Trong bài viết này anh sẽ lần lượt đi qua các phần bao gồm giải thích để các bạn hiểu Pseudo Class là gì?

1. Lớp giả là gì

Chúng ta sử dụng lớp giả để thêm hiệu ứng cho một số thành phần trong web, ví dụ khi người dùng sử dụng con chuột di chuyển qua các phần tử web mình có thể xây dựng các hiệu ứng cho hành động này hoặc khi người dùng sử dụng . Mình không cần dùng javascript để làm hiệu ứng mà cái này có sẵn trong css

1
selector:pseudo-class {property: value}
Hoặc ta cũng có thể kết hợp với lớp css
1
selector.class:pseudo-class {property: value}
2. ứng dụng hiệu ứng. liên kết lớp giả
1
2
3
4
5
6
7
8
9
10
11
   
      
   

   
      Black Link
   

Liên kết Backlink sẽ có màu đen
3. ứng dụng hiệu ứng. thăm lớp giả
1
2
3
4
5
6
7
8
9
10
11
   
      
   

   
      Click this link
   

Khi nhấp vào liên kết sẽ có hiệu ứng màu biến liên kết thành màu xanh lục
4. ứng dụng hiệu ứng. hover lớp giả
Khi di chuyển chuột ngang qua đường liên kết thì sẽ đổi màu



1
2
3
4
5
6
7
8
9
10
11
   
      
   

   
      Bring Mouse Here
   
 
5. ứng dụng hiệu ứng. lớp giả tích cực
1
2
3
4
5
6
7
8
9
10
11
selector:pseudo-class {property: value}
1
6. ứng dụng hiệu ứng. tập trung giả lớp
1
2
3
4
5
6
7
8
9
10
11
selector:pseudo-class {property: value}
3
7. First effect section con
Trong ví dụ này ta có thẻ div, bên trong nó có 2 thẻ P. Nhưng bây giờ chúng ta chỉ muốn lấy thẻ đầu tiên. Ta sử dụng con đầu lòng
 
Có thể nói đây là bài hướng dẫn chi tiết từng tính năng trong CSS cuối cùng của sê-ri Học CSS đơn giản này và các bài sau chúng ta sẽ thực hiện thông qua một số ví dụ thực tế. Trước khi bắt đầu với một số ví dụ, mình muốn nói một chút về Pseudo Class – một tính năng trong CSS3 mà mình sẽ nói kỹ hơn về dòng CSS nâng cao sau này. Bởi vì trong các hướng dẫn sau, chúng ta sẽ cần sử dụng một số thông tin Pseudo class






Pseudo Class trong CSS là gì?
Lớp giả trong CSS được sử dụng để viết CSS cho một trạng thái bất kỳ của một phần tử. Ví dụ CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào,…. Lớp giả được khai báo tại vùng chọn, đặt phía sau vùng chọn và có dấu hai chấm (. ) Ngăn cách. Ví dụ. 
selector:pseudo-class {property: value}
4 (vùng chọn của #link khi rê chuột vào)
Trong bài viết này, vì nó thuộc CSS căn bản nên mình chỉ nói qua một số pseudo class đơn giản nhất mà cũng thường gặp nhất khi viết CSS cho website
A number Pseudo Class information
selector:pseudo-class {property: value}
5 – Chọn trạng thái khi rê chuột vào một phần tử
selector:pseudo-class {property: value}
6 – Được sử dụng cho liên kết, chọn liên kết khi đã được truy cập (dựa vào Lịch sử trên trình duyệt)
selector:pseudo-class {property: value}
7 – Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào
selector:pseudo-class {property: value}
8 – Chọn phần tử khi họ chọn/nhấp vào
Một số ví dụ về pseudo class đơn giản
Dưới đây là một số ví dụ về cách sử dụng pseudo class trong CSS3, trong đó mình có cảm giác khó chịu khi làm thêm phần chuyển động với 
selector:pseudo-class {property: value}
9, nếu bạn chưa hiểu thì ở gần cuối series mình có giải thích
Điều quan trọng là chúng ta nên tạo kiểu cho chúng ta. yếu tố tiêu điểm để giúp một người biết bất kỳ yếu tố nào có tiêu điểm bàn phím. Ngoài ra,. tiêu điểm trong Hướng dẫn truy cập web nội dung (WCAG) 2. 0 - Tiêu chí thành công (SC) 2. 4. 7 quy định rằng bất kỳ giao diện người dùng nào cũng có thể kích hoạt bàn phím nào có chế độ hoạt động, nơi chỉ báo lấy tiêu điểm bàn phím. Giống như @rbottomley rằng những ngày này, với những yêu cầu về khả năng cận kề nói nghiêm ngặt hơn, chúng ta nên luôn nhớ làm cho nội dung trang web của chúng ta dễ dàng tiếp cận hơn