Pseudo-Class

Summary

Apply styles vào elements, với điều kiện (functions) hoặc interacted bởi user.
Các pseudo-class hay dùng: :nth-child, :hover, :active, :focus, :checked, :enabled, :visited

Giúp ta apply styles based on stage changes and external factors. (ví dụ khi form input invalidate)
Khác với CSS Pseudo element tập trung vào việc add style part cho element, Pseudo Class hook onto specific states hiện tại của elements.
:hover - Add style khi hover vào dòng chữ
:active - Add style khi element được interacted (ví dụ click vào, hoặc nhả click ra)
:focus - Trạng thái element được focus (bằng phím tab) + :focus-within, :focus-visible
:target - Elements được trỏ trực tiếp tới (ví dụ thêm # vào các id, hoặc h1, h2, đầu đoạn văn, …) -
:link - Có thể apply vào thẻ <a> mà chưa được click vào
:visited - Apply vào thẻ <a> đã được click rồi.
:disabled và :enabled - Thường dùng cho button
:checked và :indeterminate - Dùng style cho checkbox
Validation states
- :valid, :invalid, :in-range
Selecting elements by their index, order and occurrence
- :first-child, :last-child
- :only-child - Cho những elements chỉ có 1 child
- :first-of-type, :last-of-type (dùng khi 1 element cha chứa nhiều mixed elements, eg: p, div, …)
- :nth-child và :nth-of-type
- :only-of-type
:empty - Find empty elements
Functional pseudo-class
- :is() - Eg: .post is(h2, li, img) { ... }
- :not() - Eg: a:not([class])