ფსევდო-ელემენტი (ორმაგი კოლონი ::) აერთიანებს ელემენტის კონკრეტულ ნაწილს, ან აქმნის კონტენტს, რომელიც HTML-ში არ არის — დამატებითი markup-ის დამატების გარეშე.
რატომ არის ეს მნიშვნელოვანი
{
: ;
}
{
: ;
}
ფსევდო-ელემენტი (ორმაგი კოლონი ::) აერთიანებს ელემენტის კონკრეტულ ნაწილს, ან აქმნის კონტენტს, რომელიც HTML-ში არ არის — დამატებითი markup-ის დამატების გარეშე.
{
: ;
}
{
: ;
}
content თვისება სავალდებულოა — მის გარეშე, ფსევდო-ელემენტი არ გამოდის. გენერირებული კონტენტი ელემენტის ძალიან დასაწყისი (::before) ან ბოლო (::after) ბავშვია.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
ეს კლასიკური გამოყენება: ისრების, ბეჯების, overlay-ებისა და დეკორატიული ხაზების დახატვა — HTML-ის დაზღვევა სუფთად წისუფტად ვიზუალური ელემენტებისგან.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 შემოიტანა :: ფსევდო-ელემენტების ფსევდო-კლასებისგან განასხვავებლად (ბრაუზერები კვლავ იღებენ ერთ კოლონს ძველ ელემენტებზე თავსებადობისთვის, მაგრამ გამოიყენეთ ::).
გენერირებული content გარკვეულმა ეკრანის წამკითხველმა წაიკითხოს — არ მოათავსოთ აუცილებელი ინფორმაცია მხოლოდ ::before/::after-ში (გამოიყენეთ დეკორაციისთვის), და დეკორატიული ხატები საუკეთესოდ გამოტოვებულია ხელმისაწვდომობის ხეს.
ფსევდო-ელემენტები გაძლევთ ხატების, დეკორატიული ფორმების (ისრები, გამყოფი), drop caps და მრიცხველების დამატების საშუალებას წმინდად CSS-ში — არ არის დამატებითი <div>ი ან <span> საჭირო.
ისინი აწვდიან markup-ს სემანტიკურს აღრთვისას მდიდარი ვიზუალური დეტალები, და ისინი სუფთა, ხელმისაწვდომი სტილის საფუძველია.