CSS Pseudo-class

TIL

781

CSS3

52

Tấn Huy viết ngày 01/03/2020

CSS Pseudo-class

Không biết định nghĩa sao 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:link và a: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:link và a: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:

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)

Ở đâ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ó: 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 đỏ
• :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ố p và img 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:

• W3School ở đây
• CSS-tricks ở đây