CSS'de psödo-sınıflar ve psödo-öğeler hakkında…

CSS'deki seçicilerin yeteneklerini genişleten sahte sınıflar ve sahte öğeler, öğelerin durumu, konumu veya diğer özelliklerine göre stiller uygulamaya olanak tanır ve bunlar basit seçicilerle ifade edilemeyen özelliklerdir.

Sahte Sınıflar

Sahte sınıflar (:) ile başlar. Belirli bir durumda olan öğeyi stilize etmek için kullanılırlar.

Ana sahte sınıflar:

:hover - fare ile üzerine gelindiğinde öğeyi stilize eder.
:active - tıklama sırasında (aktif) öğeyi stilize eder.
:focus - şu anda odaklanan öğeyi stilize eder (örneğin, bir bağlantıya veya giriş alanına tıklandıktan sonra).
:visited - ziyaret edilen bağlantıları stilize eder.
:link - ziyaret edilmemiş bağlantıları stilize eder.
:first-child - ebeveyninin ilk çocuğunu stilize eder.
:last-child - ebeveyninin son çocuğunu stilize eder.
:nth-child(n) - ebeveyninin n'inci çocuğunu stilize eder. n sayı, anahtar kelime (even, odd) veya ifade (2n+1) olabilir.
:nth-last-child(n) - sondan n'inci çocuğu stilize eder.
:not(selector) - belirtilen seçiciye uymayan öğeleri stilize eder.

/* Sahte sınıfların kullanım örneği */
a:hover {
  color: blue; /* Bağlantı rengini fare ile üzerine gelindiğinde değiştirir */
}

input:focus {
  border-color: green; /* Odaklandığında giriş alanının kenarlık rengini değiştirir */
}

li:first-child {
  font-weight: bold; /* Listenin ilk öğesini stilize eder */
}

Sahte Öğeler

Sahte öğeler (::) ile başlar. Belirli bir öğenin belirli bir kısmını stilize etmek veya içeriği otomatik olarak eklemek için kullanılır.

Ana sahte öğeler:

::before - öğenin içeriğinden önce otomatik içerik ekler. Sıkça content özelliği ile kullanılır.
::after - öğenin içeriğinden sonra otomatik içerik ekler. Ayrıca content gerektirir.
::first-letter - metin bloğunun ilk harfini stilize eder.
::first-line - metin bloğunun ilk satırını stilize eder.
::selection - kullanıcının seçtiği kısmı stilize eder.

/* Sahte öğelerin kullanım örneği */
p::first-letter {
  font-size: 2em; /* Paragrafın ilk harfini büyütür */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Başlık sonrası metin ekler */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Seçilen metnin arka planını değiştirir */
  color: black;
}

Tarihsel olarak, sahte sınıflar CSS2.1 ile uyumluluk için tek nokta (:) kullanırken, CSS3'te sahte öğeler daha iyi ayırt edilebilmesi için çift nokta (::) kullanmaya başlamıştır. Modern kodda sahte öğeler için çift nokta kullanılması önerilir.

Karşılaştırma tablosu:

Özellik	Sahte Sınıf	Sahte Öğe
Söz Dizimi	`:seçici`	`::seçici`
Amaç	Öğenin durumu	Öğenin bir parçası veya otomatik içerik
Örnekler	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

CSS'de psödo-sınıflar ve psödo-öğeler hakkında açıklama yapın.