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'; } }