Phân biệt Pseudo-elements và Pseudo-classes

Mình đang dự định ra một series về CSS từ lý thuyết đến thực hành luôn vì mình đọc tài liệu trên mozilla thấy cực hay nếu vừa học vừa chia sẻ ra thì nó vừa giúp mình nhớ bài hiệu quả vừa giúp mọi người đọc tài liệu một cách “smart” nhất có thể. Mọi người có góp ý gì về ý tưởng này của mình thì bình luận phía dưới nhé nếu beat_brick nhiều quá thì không dám hê hê.

Cả 2 khái niệm mình đề cập đến đầu tiêu đè nó thuộc về pseudo-selectors dịch nôm na ra là “bộ chọn giả” tức là các selectors này là trạng thái hoặc thuộc tính của selector đã được quy định trước. Chúng không chọn các phần tử, hay đúng hơn là một phần của các phần tử nhất định hoặc các phần tử chỉ trong các ngữ cảnh nhất định. Chúng có hai loại chính: pseudo-classespseudo-elements. Ok giờ bắt đầu đi sâu hơn vào phân tích nhé:

Pseudo-classes


A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state. For example, you might want to style a link element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Một lớp giả CSS là một từ khóa được thêm vào phía cuối của selector và đứng sau một dấu  (:), nó được dùng để chỉ rõ bạn muốn định dạng cho phần tử được chọn nhưng chỉ khi nó ở trong một trạng thái nhất định. Ví dụ, bạn muốn định dạng một liên kết chỉ khi nó được hover hoặc một checkbox khi nó bị disabled hoặc một phần tử là con thứ nhất của cha trong cây DOM.

keyword_pseudo_classes

Continue reading

Advertisements