Css pseudo element là gì

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

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-classes và pseudo-elements. Ok giờ bắt đầu đi sâu hơn vào phân tích nhé:

Pseudo-classes

A CSSpseudo-classis a keyword added to the end of a selector, preceded by a colon [:], which is usedtospecify that you want to style the selected elementbutonly when it isin acertain state. For example, you might want to style a linkelement 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.

Trên đây là các từ khóa được định nghĩa trong CSS nó quy định trạng thái của một selector tương ứng.

Ok bây giờ đi tới ví dụ cụ thể ngay đây: bạn muốn định dạng cho liên kết thẻ nhưng chỉ khi nào nó được người dùng hover, focus hoặc đã visited trang đó mà thôi còn bình thường cứ cho nó bình thường đi khỏi định dạng.

Góc ITer

Bên dưới là sử dụng các pseudo-classes hover, active, focus, visited cho selector thẻ a:

/* Khi ở trang thía bình thường thì thêm màu thôi */
a {
color: blue;
font-weight: bold;
}

/* Người dùng đã truy cập trang này rồi thì cho nó màu xanh biển, :visited là một pseudo-class*/
a:visited {
color: blue;
}

/* Tương tự ở trên thì :hover, :active, :focus cũng là pseudo-class nhé, mọi người có thể dò theo bảng từ khóa trong hình mình đã tải lên!*/
a:hover,
a:active,
a:focus {
color: darkred;
text-decoration: none;
}

Pseudo-elements

Pseudo-elementsare very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons [::], that can be added to the end of selectors to select a certain part of an element.

Phần tử giả cũng rất giống với lớp giả CSS nhưng chúng có một số điểm khác nhau. Phần tử giả đứng sau hai dấu[::] . Từ khóa thể hiện phần tử giả được thêm vào cuối của selector để chỉ định một phần nhất định của một phần tử.

Tất cả các từ khóa trên mình chủ yếu dùng đến ::after và ::before còn mấy từ khóa khác mọi người cùng tìm hiểu nhé.

Ví dụ của một pseudo-element bây giờ bạn muốn thêm một kí tự nội dung sau một liên kết mà không muốn phải thêm vào một thẻ riêng biệt mà nhiều lúc nội dung này động nên không thể lúc nào cũng thêm cố định trong một thẻ được phải không.

Góc ITer

Bây giờ mình sử dụng ::after để chỉ định một phần tử giả sau thẻ a để thêm nội dung mong muốn của mình:

/* Tất cả phần tử có thuộc tính href bắt đầu với giá trị là https thì đều áp dụng thêm nội dùng vào sau phần tử đó và ::after được sử dụng ở đây như một phần tử giả pseudo-element*/
[href^=https]::after {
content: ⤴;
}

Ok trên đây là tài liệu mình tham khảo từ trang chủ Developer Mozilla mọi người hãy lên trang đó và đọc tài liệu nhé rất dễ hiểu và giải thích chi tiết về mặt lý thuyết lẫn ví dụ. Tóm lại,Pseudo-classes được sử dụng để định nghĩa mộttrạng tháiđặc biệt nào đó của một phần tử được chọn.Pseudo-elements có thể hiểu làphần tử giả , được sử dụng để tạo một số style đặc biệt của element được chọn. Mình nghĩ như vậy là khá dễ hiểu rồi đó nếu còn thắc mắc gì hay có góp ý gì mọi người hãy để lại bình luận cho mình để mình hoàn thiện hơn nhé. Cảm ơn mọi người đã đọc bài hẹn gặp lại trong các bài viết tiếp theo!