CSS-ში ფსევდოკლასები და ფსევდოელემენტები აღწერეთ.

პსევდოკლასები და პსევდოელემენტები აძლიერებენ CSS სელექტორების შესაძლებლობებს, საშუალებას აძლევენ სტილები გამოიყენოს ელემენტებზე მათი მდგომარეობის, მდებარეობის ან სხვა თვისებების საფუძველზე, რომლებიც მარტივ სელექტორებში ვერ გამოხატულა.

პსევდოკლასები

პსევდოკლასები იწყება ერთდროულად ორჯერიანი წერტილით (:). ისინი გამოიყენება ელემენტის სტილიზაციისთვის გარკვეულ მდგომარეობაში.

ძირითადი პსევდოკლასები:

• :hover - ელემენტის სტილიზაცია მიკროსის გადმოსვლისას.
• :active - ელემენტის სტილიზაცია დაჭერის დროს.
• :focus - ელემენტის სტილიზაცია, რომელიც ამჟამად ფოკუსშია.
• :visited - ნახილ ელემენტს სტილიზაცია.
• :link - არათვალიერებულ ელემენტს სტილიზაცია.
• :first-child - პირველი შვილი ელემენტი.
• :last-child - ბოლო შვილი ელემენტი.
• :nth-child(n) - n-მე შვილი ელემენტი.
• :nth-last-child(n) - n-მე შვილი ბოლოიდან.
• :not(selector) - ელემენტები, რომლებიც არ ემთხვევა მითითებულ სელექტორს.

/* მაგალითი პსევდოკლასების გამოყენების */
a:hover {
  color: blue; // ლინკის ფერის შეცვლა მიკროსის გადმოსვლისას
}

input:focus {
  border-color: green; // ველის ჩარჩოს ფერის შეცვლა ფოკუსში
}

li:first-child {
  font-weight: bold; // პირველი ელემენტის სტილიზაცია
}

პსევდოელემენტები

პსევდოელემენტები იწყება ორჯერიანი წერტილით (::). ისინი გამოიყენება კონკრეტული ნაწილის სტილიზაციისთვის ან გენერირებული კონტენტის დამატებისთვის ელემენტის შიგნით ან მის შემდეგ.

ძირითადი პსევდოელემენტები:

• ::before - გენერირებული კონტენტის დამატება ელემენტის შიგნით წინ.
• ::after - გენერირებული კონტენტის დამატება ელემენტის შიგნით შემდეგ.
• ::first-letter - პირველი ასოს სტილიზაცია.
• ::first-line - პირველი ხაზის სტილიზაცია.
• ::selection - მონიშნული ნაწილის სტილიზაცია.

/* პსევდოელემენტების გამოყენების მაგალითი */
p::first-letter {
  font-size: 2em; // პირველი ასოს გაზრდა
  font-weight: bold;
}

h2::after {
  content: " ---"; // ტექსტის დამატება სათაურის შემდეგ
  color: gray;
}

mark::selection {
  background-color: yellow; // მონიშნული ტექსტის ფონტის შეცვლა
  color: black;
}

ისტორიულად, პსევდოკლასები იყენებდნენ ერთდროულად ერთ დვზნოს (:) CSS2.1-ის შესაბამისობისთვის, ხოლო პსევდოელემენტები CSS3-ში დაიწყეს გამოყენება ორი დვზნოს (::) უკეთ გამიჯვნისთვის. რეკომენდირებულია, რომ თანამედროვე კოდში გამოიყენოს ორი დვზნოს პსევდოელემენტებისთვის.

შედარების სია:

მახასიათებელი	პსევდოკლასი	პსევდოელემენტი
სინტაქსი	:selector	::selector
დანიშნულება	ელემენტის მდგომარეობა	ელემენტის ნაწილი ან გენერირებული კონტენტი