Sözde sınıflar

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 2.

Kaynak

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 1

Kaynak

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 1

Kaynak

<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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 1,3

Kaynak

: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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 1

Kaynak

: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 {}

Not: Güvenlik nedeniyle, :visited sözde sınıfıyla yalnızca :link veya ziyaret edilmemiş durumla tanımlanan stilleri değiştirebilirsiniz. Bu nedenle, öncelikle değiştirilebilir stilleri tanımlamanız önemlidir. LVHA kuralına uymak bu konuda yardımcı olacaktır.

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 3.1

Kaynak

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 3.1

Kaynak

: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

Tarayıcı Desteği

• . 47)
• . 79
• . 51)
• . 9

Kaynak

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ı

Tarayıcı Desteği

• . 10
• . 12)
• . 4
• . 5

Kaynak

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.

Not: Renk körleri ve az gören kullanıcılar durum değişikliğini görmekte zorlanabilir, hatta bunu tamamen gözden kaçırabilirler. Bu nedenle, durum değişikliklerini (özellikle kırmızı ve yeşil) belirtmek için yalnızca renklere dayanmak iyi bir fikir değildir. Değişimi görsel olarak ifade etmek için metin değişiklikleri ve simge değişiklikleriyle birlikte durum değişikliklerini desteklemek üzere renk kullanmak iyi bir fikirdir

Öğ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

Tarayıcı Desteği

• . 4
• . 12)
• . 3
• . 3.1

Kaynak

İ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

Tarayıcı Desteği

• . 2.
• . 12)
• . 1,5
• . 3.1

Kaynak

Kardeşi olmayan öğeleri de seçebilirsiniz. şununla: :only-child sözde sınıf.

:first-of-type ve :last-of-type

Tarayıcı Desteği

• . 1
• . 12)
• . 3,5
• . 3.1

Kaynak

Ö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

Tarayıcı Desteği

• . 1
• . 12)
• . 3,5
• . 3.1

Kaynak

İ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

Tarayıcı Desteği

• . 1
• . 12)
• . 3,5
• . 3.1

Kaynak

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

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 3.1

Kaynak

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()

Tarayıcı Desteği

• . 88
• . 88
• . 78
• . 14

Kaynak

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()

Tarayıcı Desteği

• . 1
• . 12)
• . 1
• . 3.1

Kaynak

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.

Doğru

Seçicide anahtar ayırt edici karakter olarak tek veya çift : kullanımına dikkat edin

Yanlış

Sözde öğeler parçaları, sözde sınıflar ise durumu belirtir.

Aşağıdakilerden hangileri işlevsel sözde sınıftır?

:is()

🎉

:target

İşlevsel sözde sınıflar, parametreleri kabul ettiklerini belirtmek için bunlardan sonra () işareti ekler.

:empty

İşlevsel sözde sınıflar, parametreleri kabul ettiklerini belirtmek için bunlardan sonra () işareti ekler.

:not()

🎉

Aşağıdaki yapay sınıflardan hangileri kullanıcı etkileşiminden kaynaklanır?

:hover

🎉

:press

Tekrar deneyin.

:squeeze

Tekrar deneyin.

:target

🎉

:focus-within

🎉

Aşağıdakilerden hangileri <form> durum sözde sınıflarıdır?

:enabled

🎉

:fresh

Tekrar deneyin.

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

Tekrar deneyin.

:valid

🎉