Nested pseudo

&:hover gibi nested sözde sınıfları öğrenirsin.

Sözde sınıflar nested

Sözde sınıflar (pseudo-classes) bir öğenin durumunu yakalar: :hover, :focus, :active. Nesting içinde & ile dış seçiciye bağlanırlar: .link { &:hover { color: navy; } }.

Bu yazım .link:hover ile aynıdır. & olmadan :hover { } yazarsan tarayıcı bunu .link :hover olarak çözümler; yani linkin içindeki bir öğenin üzerine gelmesi anlamına gelir. & hedefi doğru tutar.

Sözde öğeler nested

Sözde öğeler (pseudo-elements) bir öğenin parçasını yaratır: ::before, ::after. Nesting içinde yine & ile bağlanır: .badge { &::before { content: '●'; } }.

İki noktalı yazım (::) modern standarttır; tek noktalı :before eski CSS'ten kalır ama hala çalışır. Yeni kodda çift nokta önerilir.

Uygulama Link için hover ve içerik ekle

.link seçicisinin içine iki nested bölüm ekle: birincisi &:hover sözde sınıfı, içine color: navy; ikincisi &::after sözde öğesi, içine content: '→'.

Örnek çözümü göster

.link bloğunun içine iki bölüm ekle.
Örnek çözüm:
/* .link içine hover ve after ekle */
.link {
  text-decoration: none;
  &:hover {
    color: navy;
  }
  &::after {
    content: '→';
  }
}

Kendini test et

Sözde sınıfı durumuna eşle

&:hover

Üzerine gelince
&:focus

Odaklanınca
&:active

Tıklanınca
&:disabled

Devre dışıyken
Hangisi sözde öğedir?
- &:hover
- &:focus
- &::before
- &:active
Cevabı göster

&::before — Doğru. ::before bir sözde öğedir; çift noktalı yazım onu sözde sınıftan ayırır.

Sözde öğeyi yaz

.badge {
  ____ {
    content: 'Yeni';
  }
}

Cevabı göster

.badge {
  &::before {
    content: 'Yeni';
  }
}

Sıradaki ders: Nested compound

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler