CSS Podcast'i - 015: Sözde sınıflar
'nı inceleyin.
Bir e-posta kayıt formunuz olduğunu,
ve geçersiz bir e-posta adresi içeriyorsa e-posta form alanının kırmızı bir kenarlıkla görünmesini istiyorsunuz.
Bunu nasıl yapabilirsiniz?
Bir :invalid
CSS sözde sınıfını kullanabilirsiniz.
ve tarayıcı tarafından sağlanan pek çok sözde sınıftan biridir.
Yapay sınıf, durum değişikliklerine ve harici faktörlere dayalı stiller uygulamanıza olanak tanır. Bu durum, tasarımınızın geçersiz e-posta adresi gibi kullanıcı girişlerine tepki verebileceği anlamına gelir. Bu konular seçiciler modülünde ele alınmıştır. Bu modülde bunları daha ayrıntılı olarak öğreneceksiniz.
Sözde öğelerin aksine önceki modülde daha fazla bilgi edinebileceğiniz sözde sınıflar, bir öğenin içinde olabileceği belirli durumlara bağlanır. oluşturmak yerine bu öğeleri kullanabilirsiniz.
Etkileşimli durumlar
Aşağıdaki sözde sınıflar, kullanıcının sayfanızla olan etkileşimi nedeniyle uygulanır.
:hover
Kullanıcının fare veya dokunmatik yüzey gibi bir işaretleme cihazı varsa
bir öğenin üzerine yerleştiriyor,
projenin etkisini
Stilleri uygulamak için :hover
.
Bu, bir öğeyle etkileşim kurulabileceğine dair ipucu vermek için kullanışlı bir yoldur.
:active
Bu durum, bir öğeyle etkin olarak etkileşimde bulunurken tetiklenir: örneğin tıklama yayınlanmadan önce. Fare gibi bir işaretleme cihazı kullanılıyorsa Bu durum, tıklamanın başladığı ve henüz yayınlanmadığı zamandır.
:focus
, :focus-within
ve :focus-visible
<button>
gibi bir öğe odak alabiliyorsa
bu duruma tepki vermek için
:focus
sözde sınıf.
Öğenizin bir alt öğesine odaklanılırsa da tepki verebilirsiniz.
:focus-within
.
Düğmeler gibi odaklanılabilir öğeler odaklandıkları sırada (tıklandığında bile) bir odak halkası gösterir. Bu tür bir durumda geliştirici aşağıdaki CSS'yi uygular:
button:focus {
outline: none;
}
Bu CSS, bir öğeye odak aldığında varsayılan tarayıcı odaklama halkasını kaldırır.
Bu durum, bir web sayfasında klavyeyle gezinen kullanıcılar için erişilebilirlik sorunu oluşturur.
Odak stili yoksa
sekme tuşunu kullanırken odağın şu anda nerede olduğunu takip edemezler.
:focus-visible
ile
Bir öğeye klavye aracılığıyla odaklanıldığında bir odak stili sunabilirsiniz.
Bununla birlikte, bir işaretçi cihaz cihazla etkileşimde bulunduğunda bunu önlemek için outline: none
kuralını da kullanır.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target
sözde sınıf, bir URL parçasıyla eşleşen id
öğesine sahip bir öğeyi seçer.
Aşağıdaki HTML'ye sahip olduğunuzu varsayalım:
<article id="content">
…
</article>
URL #content
içerdiğinde bu öğeye stil ekleyebilirsiniz.
#content:target {
background: yellow;
}
Bu, özellikle bağlantı oluşturulmuş olabilecek alanları, Örneğin bir web sitesindeki ana içerik gibi.
Tarihi eyaletler
:link
:link
Sözde sınıf, henüz ziyaret edilmemiş href
değerine sahip tüm <a>
öğelerine uygulanabilir.
:visited
Kullanıcı tarafından daha önce ziyaret edilen bir bağlantının stilini belirlemek için
:visited
sözde sınıf.
Bu, :link
değerinin tersi olsa da kullanabileceğiniz daha az CSS özelliği var.
güvenlik nedeniyle
Yalnızca color
, background-color
ve
border-color
, outline-color
ve SVG'nin rengi: fill
ve stroke
.
Sıra önemlidir
Bir :visited
stili tanımlarsanız
en az eşit kesinliğe sahip sözde sınıf bir bağlantı tarafından geçersiz kılınabilir.
İşte bu sebeple
Sözde sınıf içeren bağlantıları belirli bir sırada biçimlendirmek için LVHA kuralını kullanmanız önerilir:
:link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
Form durumları
Aşağıdaki sözde sınıflar form öğelerini seçebilir, bu öğelerin onlarla etkileşimde bulunabileceği durumlar.
:disabled
ve :enabled
Form öğesiyse
<button>
gibi bir tarayıcının tarayıcı tarafından devre dışı bırakılması,
bu durumu daha da iyi anlamak için
:disabled
sözde sınıf.
:enabled
karşıt eyalet için sözde sınıf kullanılabilir,
form öğeleri de varsayılan olarak :enabled
olsa da
Dolayısıyla, kendinizi bu sözde sınıfa erişirken bulamayabilirsiniz.
:checked
ve :indeterminate
:checked
sözde sınıf, destekleyici bir form öğesi,
onay kutusunu işaretleyin veya
radyo düğmesinin işaretli durumda olduğunu gösterir.
:checked
durumu ikili(doğru veya yanlış) durumundadır.
ancak onay kutuları işaretli olmadığında veya işaretlenmediğinde, arasında durumu olur.
Bu işlem
:indeterminate
durumu.
Bu duruma örnek olarak, bir "tümünü seç" aynı gruptaki tüm onay kutularını işaretler. Kullanıcı daha sonra bu onay kutularından birinin işaretini kaldırmak isterse kök onay kutusu artık "all" öğesini temsil etmeyecek kontrol ediliyor belirsiz bir duruma getirilmelidir.
<progress>
öğesi ayrıca, stil ayarlanabilen belirsiz bir duruma sahiptir.
Yaygın kullanım alanlarından biri, ne kadar daha fazlasına ihtiyaç duyulduğunun bilinmediğini belirtmek için çizgili bir görünüm vermektir.
:placeholder-shown
Bir form alanında placeholder
özelliği varsa ve değer yoksa
:placeholder-shown
söz konusu duruma stilleri eklemek için sözde-sınıf kullanılabilir.
Alanda içerik olur olmaz
bir placeholder
olup olmadığına bakılmaksızın
bu eyalet artık geçerli olmayacak.
Doğrulama durumları
HTML formu doğrulamasına aşağıdaki gibi sözde sınıflarla yanıt verebilirsiniz:
:valid
:invalid
ve
:in-range
.
:valid
ve :invalid
sözde sınıfları bağlamlar için yararlıdır
Örneğin, eşleştirilmesi gereken pattern
içeren bir e-posta alanı
.
Bu geçerli değer durumu, kullanıcıya gösterilebilir.
bir sonraki alana güvenli bir şekilde geçebileceklerini
anlamalarına yardımcı olmak.
Bir girişte min
ve max
varsa :in-range
sözde sınıfı kullanılabilir.
örneğin sayısal bir giriş ve değer bu sınırlar dahilindeyse sona erecektir.
HTML formlarında,
required
özelliğine sahip bir alanın gerekli olduğunu belirleyebilirsiniz.
:required
söz konusu sınıf, zorunlu alanlar için kullanılabilir.
Zorunlu olmayan alanlar,
:optional
sözde sınıf.
Öğeleri dizine, sıra ve yerlerine göre seçme
Öğeleri dokümanda bulundukları yere göre seçen bir yapay sınıf grubu vardır.
:first-child
ve :last-child
İlk veya son öğeyi bulmak istiyorsanız
dönüşüm hunisinin üst kısmındaki
:first-child
ve
:last-child
.
Bu sözde sınıflar, bir kardeş öğe grubundaki ilk veya son öğeyi döndürür.
:only-child
Kardeşi olmayan öğeleri de seçebilirsiniz.
şununla:
:only-child
sözde sınıf.
:first-of-type
ve :last-of-type
Önce
:first-of-type
ve
:last-of-type
, başta
:first-child
ve :last-child
ile aynı şeyi yapıyor gibi görünebilirler, ancak şu HTML'yi göz önünde bulundurun:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
Ve bu CSS:
.my-parent div:first-child {
color: red;
}
İlk alt öğe bir div değil, paragraf olduğu için hiçbir öğe kırmızı renkte gösterilmez.
:first-of-type
sözde sınıfı bu bağlamda yararlıdır.
.my-parent div:first-of-type {
color: red;
}
İlk <div>
ikinci alt öğe olsa da
bu hâlâ .my-parent
öğesinin içindeki ilk türüdür
bu kurala göre kırmızı renklendirilir.
:nth-child
ve :nth-of-type
İlk ve son alt öğeler ve türlerle de sınırlı değilsiniz.
:nth-child
ve
:nth-of-type
sözde sınıflar, belirli bir dizindeki bir öğeyi belirtmenize olanak tanır.
CSS seçicilerde dizine ekleme 1 ile başlar.
Bu sözde sınıflara da birden fazla dizin aktarabilirsiniz.
Tüm öğeleri eşit sıklıkta seçmek istiyorsanız :nth-child(even)
işlevini kullanabilirsiniz.
Ayrıca, düzenli aralıklarla yerleştirilmiş aralıklarda öğeleri bulan daha karmaşık seçiciler oluşturabilirsiniz. An+B mikro söz dizimini kullanabilirsiniz.
li:nth-child(3n+3) {
background: yellow;
}
Bu seçici her üçüncü öğeyi seçer,
3. öğeden başlayarak.
Bu ifadedeki n
, dizindir
0 'dan 3 (3n
) ile başlayan, dizinin değerini çarptığınız sayıdır.
7 <li>
öğeniz olduğunu varsayalım.
3n+3
, (3 * 0) + 3
diline çevrildiğinden seçilen ilk öğe 3.
n
değeri 1
arttığından bir sonraki yinelemede 6. öğe seçilir.
yani (3 * 1) + 3)
.
Bu ifade hem :nth-child
hem de :nth-of-type
için çalışır.
Bu tür seçicilerde şu ayarları yapabilirsiniz: nth-child tester veya bu miktar seçici aracını kullanın.
:only-of-type
Son olarak, bir kardeş grubunda belirli bir türdeki tek öğeyi
:only-of-type
.
Bu özellik, yalnızca tek bir öğe içeren listeleri seçmek istediğinizde kullanışlıdır.
veya bir paragraftaki tek kalın
öğeyi bulmak istiyorsanız kullanın.
Boş öğeleri bulma
Bazen tamamen boş öğeleri tanımlamak, bunun için sanal bir sınıf da var.
:empty
Bir öğenin alt öğesi yoksa
:empty
sözde sınıf onlar için geçerlidir.
Ancak alt öğeler yalnızca HTML öğeleri veya metin düğümleri değildir. Bunlar aynı zamanda boşluk veya
Bu, aşağıdaki HTML'de hata ayıklarken ve :empty
ile neden çalışmadığını merak ederken kafa karıştırıcı olabilir:
<div>
</div>
Bunun nedeni, açılış ile kapanış <div>
arasında biraz boşluk olmasıdır.
boş bir alan işe yaramaz.
:empty
sözde sınıfı, HTML üzerinde çok az kontrolünüz varsa ve boş öğeleri gizlemek istiyorsanız yararlı olabilir.
örneğin bir WYSIWYG içerik düzenleyici.
Burada bir düzenleyen, tuhaf, boş bir paragraf ekledi.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
:empty
ile aradığınızı bulabilir ve gizleyebilirsiniz.
.post :empty {
display: none;
}
Birden çok öğeyi bulma ve hariç tutma
Bazı sözde sınıflar, daha küçük boyutlu CSS'ler yazmanıza yardımcı olur.
:is()
Bir .post
öğesinde h2
, li
ve img
alt öğelerinin tümünü bulmak isterseniz:
şuna benzer bir seçici listesi yazmayı düşünebilirsiniz:
.post h2,
.post li,
.post img {
…
}
:is()
ile
sözde sınıf olarak, daha kompakt bir sürüm yazabilirsiniz:
.post :is(h2, li, img) {
…
}
:is
sözde sınıfı, seçici listesinden daha kompakt olmakla kalmaz, aynı zamanda daha esnektir.
Çoğu durumda
seçici listesinde hata veya desteklenmeyen bir seçici varsa
seçici listesinin tamamı artık çalışmayacaktır.
Bir :is
sözde sınıfındaki iletilen seçicilerde hata varsa
geçersiz seçiciyi yok sayar ancak geçerli olanları kullanır.
:not()
Ayrıca,
:not()
sözde sınıf.
Örneğin, class
özelliğine sahip olmayan tüm bağlantıları biçimlendirmek için bunu kullanabilirsiniz.
a:not([class]) {
color: blue;
}
Sözde :not
sınıfı, erişilebilirliği iyileştirmenize de yardımcı olabilir.
Örneğin, <img>
boş bir değer olsa bile alt
içermelidir
geçersiz resimlere kalın kırmızı bir dış çizgi ekleyen bir CSS kuralı yazabilirsiniz:
img:not([alt]) {
outline: 10px red;
}
Öğrendiklerinizi sınayın
Sözde derslerle ilgili bilginizi test edin
Sözde sınıflar bir öğeye dinamik olarak uygulanmış gibi davranırken sözde öğeler de bir öğenin kendisi üzerinde işlem yapar.
Aşağıdakilerden hangileri işlevsel sözde sınıftır?
:empty
:not()
:target
:is()
Aşağıdaki yapay sınıflardan hangileri kullanıcı etkileşiminden kaynaklanır?
:focus-within
:squeeze
:hover
:press
:target
Aşağıdakilerden hangileri <form>
durum sözde sınıflarıdır?
:loading
:fresh
:checked
:enabled
:valid
:in-range
:indeterminate