CSS'de psödo-sınıflar nedir?

CSS’de pseudo-sınıflar, öğenin özel durumunu belirtmek için seçicilere eklenen anahtar kelimelerdir. Kullanıcıyla etkileşime, belge yapısındaki konumuna veya diğer özelliklere göre stiller uygulamaya olanak tanırlar ve bu özellikler standart seçicilerle ifade edilemez.

Pseudo-sınıf örnekleri:

• Kullanıcı durumları:

  • :hover - fare ile üzerine gelinen öğe.
  • :active - aktif hale getirilen öğe (örneğin, tıklanan bir düğme).
  • :focus - giriş odaklı öğe (örneğin, bir metin alanı).
  • :visited - kullanıcının daha önce ziyaret ettiği bağlantı.
  • :link - kullanıcının henüz ziyaret etmediği bağlantı.

• Yapıdaki konum:

  • :first-child - ebeveyninin ilk çocuğu.
  • :last-child - ebeveyninin son çocuğu.
  • :nth-child(n) - n. çocuk.
  • :first-of-type - türüne göre ilk öğe.
  • :last-of-type - türüne göre son öğe.

• Diğerleri:

  • :empty - çocuk veya metin içermeyen öğe.
  • :not(selector) - belirtilen seçiciye uymayan öğeler.

Sözdizimi:

selector:pseudo-class {
  property: value;
}

Kullanım örneği:

/* Paragraf üzerine gelindiğinde metin rengini değiştir */
p:hover {
  color: blue;
}

/* Liste ilk öğesi için stil */
li:first-child {
  font-weight: bold;
}

Pseudo-sınıflar, seçicilerin yeteneklerini genişleterek, basit stil değişiklikleri için JavaScript kullanmadan daha dinamik ve etkileşimli arayüzler oluşturmayı sağlar.