Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
CSS Pseudo-class
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áidiv
đó 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ếta: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ếta: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ếta: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ếta: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
:
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 tronghref
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ầninput
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-child
chọ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 trongdiv
sẽ có background là màu đỏ -
:last-child
nó giống như là:first-child
như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ớinth-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ộtdiv
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ùngdiv img:nth-of-type(odd)
.
Link tham khảo:






