Junior
CSS-ში псევდოკლასები რა არის?
sobes.tech AI
პასუხი AI-სგან
CSS-ში псევდოკლასები არის საკვანძო სიტყვები, რომლებიც ემატება სელექტორებს, რათა მიუთითოს ელემენტის განსაკუთრებული მდგომარეობა. ისინი საშუალებას აძლევენ სტილების გამოყენებას ელემენტებზე, მათი ურთიერთქმედების, დოკუმენტის სტრუქტურაში მდებარეობის ან სხვა თვისებების საფუძველზე, რომლებიც არ შეიძლება გამოხატოს სტანდარტული სელექტორებით.
Pseudo-კლასების მაგალითები:
-
მომხმარებლის მდგომარეობები:
:hover- ელემენტი, რომელზეც მიკროსკოპი გადის.:active- ელემენტი, რომელიც აქტივირებულია (მაგალითად, დაჭერილი ღილაკი).:focus- ელემენტი, რომელიც ფოკუსშია (მაგალითად, ტექსტური ველი).:visited- ბმული, რომელიც მომხმარებელმა უკვე მოინახულა.:link- ბმული, რომელიც მომხმარებელმა ჯერ არ მოინახულა.
-
სტრუქტურაში მდებარეობა:
:first-child- პირველი შვილი მშობლის.:last-child- ბოლო შვილი მშობლის.:nth-child(n)- n-მე შვილი.:first-of-type- პირველი ელემენტი თავისი ტიპის შორის.:last-of-type- ბოლო ელემენტი თავისი ტიპის შორის.
-
სხვა:
:empty- ელემენტი, რომელიც არ შეიცავს შთამომავლებს ან ტექსტს.:not(selector)- ელემენტები, რომლებიც არ ემთხვევა მითითებულ სელექტორს.
სინტაქსი:
selector:pseudo-class {
property: value;
}
გამოყენების მაგალითი:
/* ტექსტის ფერის შეცვლა, როდესაც მიკრო გადის პარაგრაფზე */
p:hover {
color: blue;
}
/* სიის პირველი ელემენტის სტილი */
li:first-child {
font-weight: bold;
}
Pseudo-კლასები ზრდიან სელექტორების შესაძლებლობებს, რაც საშუალებას აძლევს შექმნათ უფრო დინამიური და ინტერაქტიული ინტერფეისები, გარეშე JavaScript-ის გამოყენების, უბრალო სტილური ცვლილებებისთვის.