CSS Pseudo-class
TIL
612
CSS3
52
White

Tấn Huy viết ngày 21/07/2018

HyHy, Ngày 9

CSS Pseudo-class

Không biết định nghĩa sao :laughing: xin phép trích lại câu từ w3school "A pseudo-class is used to define a special state of an element.". Để dễ hiểu, mình sẽ nói về công dụng của nó, pseudo-class thường dùng trong một số trường hợp như:

  • Style cho một element làm cho nó thay đổi khi chúng ta rê chuột vào. Ví dụ: Chúng ta viết một cái div có background là màu đỏ và khi rê chuột lên cái div đó thì nó sẽ chuyển sang màu vàng chẳng hạn, đó là dùng pseudo-class.
  • Khi chúng ta dẫn một cái link và style cho nó nếu click vào link đó thì là màu hồng còn để chuột lên thì là màu đỏ, đó là dùng pseudo-class
  • Chúng ta có một cái form điền email bên trong ô ghi mail là màu trắng và khi click vào form để điền thì ô đó chuyển sang màu hồng, đó cũng là dùng pseudo-class và vân vân mây mây

Cú pháp ghi một pseudo-class như sau:

    selector:pseudo-class{
        property:value;     
    }

Chúng ta sẽ đi đến một số pseudo-class phổ biến để hiểu rõ hơn, và ở đây mình chỉ nêu một số pseudo-class tiêu biểu (mấy cái mình biết và dùng rồi) chứ ngoài ra còn rất nhiều, chúng ta có thể tham khảo ở link cuối bài.

Nhóm pseudo-class tác động lên link

Trong nhóm này chúng ta sẽ có 4 pseudo-class chính đó là: :link :visited :hover :active. Chúng ta sẽ tìm hiểu xem khi nào thì một link được các pseudo-class này chọn để áp dụng những CSS chúng ta đã viết trong đó:

  • :link, khi ta dẫn một đường link bị sai hoặc một đường link mà trình duyệt chưa bao giờ truy cập vào lần nào thì lúc này những gì viết ở :link sẽ được áp dụng. Ví dụ ta viết a:link{color:red} khi link đó bị sai hoặc trình duyệt chưa từng truy cập vào thì link đó sẽ chuyển sang màu đỏ
  • :visited, khi chúng ta có một đường link mà trình duyệt hiện tại đã từng truy cập vào rồi thì nó :visited sẽ được áp dụng. Ví dụ ta viết a:visited{color:green;} thì khi trình duyệt đã vào link đó một lần rồi, nó sẽ chuyển sang màu xanh lá cây
  • :hover, khi ta rê chuột vào link đó. Ví dụ ta viết a:hover{color:yellow;} thì khi rê chuột lên đường link đó, nó sẽ chuyển sang màu vàng.
  • :active, khi ta "active" nó như click vào chẳng hạn. Ví dụ ta viết a:active{color:pink} thì khi ta click vào link nó sẽ chuyển sang màu hồng

Cần ghi nhớ một điều quan trọng nữa, khi chúng ta style cho link bằng 4 pseudo-class ở trên, thì khi viết a:hover phải viết sau a:linka:visited để đạt được hiệu quả. Và khi viết a:active thì phải viết sau a:hover cũng là để được hiệu quả. Nếu khi chúng ta tráo đổi vị trí như đưa a:hover lên trước a:linka:visited thì khi ta đưa chuột vào link nó sẽ không đổi màu, tương tự với việc nếu chúng ta đảo vị trí của a:active với a:hover. Xem demo dưới đây để rõ hơn:

Chúng ta có thể kết hợp giữa pseudo-class và class như thế này:

    a.highlight:hover{
        color:orange;
    }

Ngoài ra còn có thể áp dụng lên thứ khác ngoài link, chẳng hạn như :hover có thể áp dụng lên div:


Còn có thể lên nhiều cái khác nữa như p, span, article,..

Nhóm tác động lên input và link

Trong nhóm này chúng ta sẽ có một số pseudo-class tiêu biểu như:

  • :focus, như đã nói lúc đầu "Chúng ta có một cái form điền email bên trong ô ghi mail là màu trắng và khi click vào form để điền thì ô đó chuyển sang màu hồng" đó chính là nhờ :focus. Đây là demo:

  • :target thường dùng kết hợp với các ID. Các link bên trong href mà chúng ta dẫn nếu có # phía trước (thường là dùng trong các phần đầu mục bài viết) thì sẽ bị target tác động. Xem demo sau để rõ hơn:

  • :checked thì sẽ tác động lên phần input nhưng chỉ cho radio button và checkboxes. Hình minh họa: (có thể xem chi tiết tại đây) alt text

Ở đây chỉ nêu một số ví dụ tiêu biểu, chúng ta có thể xem thêm như :read-only, :read-write, :required, :optional

Nhóm tác động vào vị trí

  • :first-childchọn element đầu tiên bên trong parent element (element lớn chứa nó, trường hợp không có parent element thì body sẽ là parent element). Ví dụ ta có:alt text Khi ta viết CSS div p:first-child{background-color:red;} thì dòng đầu tiên trong div sẽ có background là màu đỏalt text
  • :last-child nó giống như là :first-childnhưng thay vì chọn element đầu tiên thì nó sẽ chọn element cuối cùng
  • :nth-child() nó cũng dùng để chọn element dựa theo vị trí, cơ bản thì nó có thể chọn những element nằm ở vị trí chẵng (nth-child(even)) trong element mẹ, ví dụ như có 5 dòng thì nó sẽ chọn dòng 2 và 4 và ngược lại với nth-child(odd). Ngoài ra nó còn có thể dùng thêm một số phép toán đơn giản như (3n hay 4n-1). Đi sâu vào tìm hiểu về :nth-child() ở đây và bộ test thú vị ở đây
  • :nth-of-type, cách thức hoạt động là gần giống với :nth-child tuy nhiên với trường hợp trong cùng một parent element có các element khác nhau và có cùng level, ví dụ như trong một div sẽ có vô số pimg xen lẫn nhau. chúng ta muốn chon các hình ảnh ở vị trí lẻ thì dùng :nth-child sẽ không được mà phải dùng div img:nth-of-type(odd).

Link tham khảo:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tấn Huy

17 bài viết.
6 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
11 2
Tạo thanh tìm kiếm với hiệu ứng "gậy như ý" bằng HTML và CSS Trong bài viết này chúng ta sẽ tìm hiểu việc tạo ra một thanh tìm kiếm và khi nhấp ch...
Tấn Huy viết 2 tháng trước
11 2
White
4 0
1. Website layouts Như chúng ta biết, bố cục của một website sẽ được chia ra thành nhiều phần, các phần chính đáng chú ý nhất là: Header: Tiêu đ...
Tấn Huy viết 2 tháng trước
4 0
White
4 0
Ở phần trước mình đã nói về các property của phần parent trong CSS Flexbox (xem lại (Link)). Hôm nay chúng ta sẽ nói tiếp phần còn lại đó là các pr...
Tấn Huy viết 22 ngày trước
4 0
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 2 tháng trước
0 2
White
19 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
19 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
6 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!