Sözde sınıflar

CSS Podcast - 015: Sözde sınıflar

E-posta kaydı formunuz olduğunu ve geçersiz bir e-posta adresi içeriyorsa e-posta formu alanının kırmızı kenarlıklı olmasını istediğinizi varsayalım. Bunu nasıl yapıyorsunuz? Tarayıcı tarafından sağlanan birçok sözde sınıftan biri olan :invalid CSS sözde sınıfını kullanabilirsiniz.

Sanal sınıf, durum değişikliklerine ve harici faktörlere göre stiller uygulamanıza olanak tanır. Bu sayede tasarımınız, geçersiz e-posta adresi gibi kullanıcı girişlerine tepki verebilir. Bu konular seçiciler modülünde ele alınmaktadır. Bu modülde, bu konular hakkında daha ayrıntılı bilgi edinebilirsiniz.

Önceki modülde daha fazla bilgi edinebileceğiniz sözde öğelerin aksine, sözde sınıflar, bir öğenin genel olarak stil bölümlerini belirlemek yerine öğenin bulunabileceği belirli durumlara bağlanır.

Etkileşimli eyaletler

Aşağıdaki sözde sınıflar, kullanıcının sayfanızla etkileşime geçmesi nedeniyle geçerli olur.

:hover

Browser Support

• 1
• 12
• 1
• 2

Source

Kullanıcının fare veya dokunmatik yüzey gibi bir işaretleme cihazı varsa ve bu cihazı bir öğenin üzerine yerleştirirse :hover ile bu durumu yakalayabilir ve stiller uygulayabilirsiniz. Bu, bir öğeyle etkileşim kurulabileceğini belirtmek için yararlı bir yöntemdir.

:active

Browser Support

• 1
• 12
• 1
• 1

Source

Bu durum, bir öğeyle etkin bir şekilde etkileşim kurulurken (ör. tıklama) tıklama bırakılmadan önce tetiklenir. Fare gibi bir işaretçi cihaz kullanılıyorsa bu durum, tıklamanın başladığı ve henüz bırakılmadığı zamandır.

:focus, :focus-within ve :focus-visible

Browser Support

• 1
• 12
• 1
• 1

Source

Bir öğeye odaklanılabilirse (ör. <button>) :focus sözde sınıfını kullanarak bu duruma tepki verebilirsiniz.

Öğenizin bir alt öğesi odaklandığında da :focus-within ile tepki verebilirsiniz.

Düğmeler gibi odaklanılabilir öğeler, odaklanıldığında (tıklandığında bile) bir odak halkası gösterir. Bu tür durumlarda geliştirici aşağıdaki CSS'yi uygular:

button:focus {
    outline: none;
}

Bu CSS, bir öğe odaklandığında varsayılan tarayıcı odak halkasını kaldırır. Bu da 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 öğe klavye üzerinden odak aldığında bir odak stili sunabilir, aynı zamanda outline: none kuralını kullanarak bir işaretçi cihaz öğeyle etkileşime geçtiğinde bunu önleyebilirsiniz.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

• 1
• 12
• 1
• 1.3

Source

:target yan sınıf, URL parçasıyla eşleşen bir id içeren bir öğeyi seçer. Aşağıdaki HTML'ye sahip olduğunuzu varsayalım:

<article id="content">
    …
</article>

URL #content içeriyorsa bu öğeye stil ekleyebilirsiniz.

#content:target {
    background: yellow;
}

Bu, atlama bağlantısı aracılığıyla belirli bir bağlantıya sahip olabilecek alanları (ör. bir web sitesindeki ana içerik) vurgulamak için kullanışlıdır.

Tarihi eyaletler

:link

Browser Support

• 1
• 12
• 1
• 1

Source

:link sözde sınıfı, henüz ziyaret edilmemiş bir href değerine sahip tüm <a> öğelerine uygulanabilir.

:visited

:visited sözde sınıfını kullanarak kullanıcı tarafından daha önce ziyaret edilmiş bir bağlantıya stil uygulayabilirsiniz. Bu, :link durumunun tam tersidir ancak güvenlik nedeniyle kullanabileceğiniz daha az CSS özelliği vardır. Yalnızca color, background-color, border-color, outline-color ve SVG fill ile stroke'nin rengini biçimlendirebilirsiniz.

Siparişle ilgili konular

Tanımladığınız :visited stili, en azından eşit düzeyde özgünlük içeren bir bağlantı sözde sınıfı tarafından geçersiz kılınabilir. Bu nedenle, bağlantılara sözde sınıflarla stil uygulamak için LVHA kuralını belirli bir sırada kullanmanız önerilir: :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

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

Form durumları

Aşağıdaki sözde sınıflar, form öğelerini bu öğelerle etkileşim sırasında bulunabilecekleri çeşitli durumlarda seçebilir.

:disabled ve :enabled

Browser Support

• 1
• 12
• 1
• 3.1

Source

<button> gibi bir form öğesi tarayıcı tarafından devre dışı bırakılırsa :disabled sözde sınıfını kullanarak bu duruma bağlanabilirsiniz. :enabled sözde sınıfı, zıt durum için kullanılabilir. Ancak form öğeleri varsayılan olarak :enabled olduğundan bu sözde sınıfa ihtiyaç duymayabilirsiniz.

:checked ve :indeterminate

Browser Support

• 1
• 12
• 1
• 3.1

Source

:checked sözde sınıfı, onay kutusu veya radyo düğmesi gibi destekleyici bir form öğesi işaretli durumdayken kullanılabilir.

:checked durumu ikili(doğru veya yanlış) bir durumdur ancak onay kutuları, işaretli veya işaretsiz olmadığında arada bir duruma sahiptir. Bu durum :indeterminate durumu olarak bilinir.

Bu duruma örnek olarak, bir gruptaki tüm onay kutularını işaretleyen bir "tümünü seç" denetimi verilebilir. Kullanıcı bu onay kutularından birini işaretini kaldırırsa kök onay kutusu artık "tüm"ün işaretli olduğunu temsil etmez. Bu nedenle, belirsiz bir duruma getirilmelidir.

<progress> öğesinin stil uygulanabilen belirsiz bir durumu da vardır. Yaygın bir kullanım alanı, ne kadar daha ihtiyaç duyulduğunun bilinmediğini belirtmek için şeritli bir görünüm vermektir.

:placeholder-shown

Browser Support

• 47
• 79
• 51
• 9

Source

Bir form alanında placeholder özelliği varsa ve değer yoksa bu duruma stil eklemek için :placeholder-shown sözde sınıfı kullanılabilir. Alana içerik girildikten sonra, placeholder işareti olsun veya olmasın bu durum artık geçerli olmaz.

Doğrulama durumları

Browser Support

• 10
• 12
• 4
• 5

Source

HTML form doğrulamasına :valid, :invalid ve :in-range gibi sözde sınıflarla yanıt verebilirsiniz. :valid ve :invalid sözde sınıfları, geçerli bir alan olması için eşleştirilmesi gereken bir pattern içeren e-posta alanı gibi bağlamlarda faydalıdır. Bu geçerli değer durumu kullanıcıya gösterilebilir. Böylece kullanıcı, bir sonraki alana güvenle geçebileceğini anlayabilir.

:in-range sözde sınıfı, bir girişte min ve max varsa (ör. sayısal giriş) ve değer bu sınırlar içindeyse kullanılabilir.

HTML formlarında, required özelliğini kullanarak bir alanın zorunlu olduğunu belirleyebilirsiniz. :required sözde sınıfı, zorunlu alanlar için kullanılabilir. Zorunlu olmayan alanlar :optional sözde sınıfı ile seçilebilir.

Not: Renk körlüğü olan ve görme engeli olan kullanıcılar durum değişikliğini görmede güçlük çekebileceği veya durumu tamamen gözden kaçırabileceği için durum değişikliklerini belirtmek üzere yalnızca renge (özellikle de kırmızı ve yeşile) güvenmek iyi bir fikir değildir. Renk değişikliklerinin yanı sıra metin ve simge değişikliklerini kullanarak durumu desteklemek iyi bir fikirdir. Bu sayede, değişiklikleri görsel olarak belirtebilirsiniz.

Öğeleri endekse, sıraya ve oluşuma göre seçme

Öğeleri dokümanda bulundukları yere göre seçen bir grup sözde sınıf vardır.

:first-child ve :last-child

Browser Support

• 4
• 12
• 3
• 3.1

Source

İlk veya son öğeyi bulmak isterseniz :first-child ve :last-child öğelerini kullanabilirsiniz. Bu sözde sınıflar, bir kardeş öğe grubundaki ilk veya son öğeyi döndürür.

:only-child

Browser Support

• 2
• 12
• 1.5
• 3.1

Source

:only-child sözde sınıfını kullanarak kardeş öğesi olmayan öğeleri de seçebilirsiniz.

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

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

İlk bakışta :first-child ve :last-child ile aynı işlevi görüyormuş gibi görünen :first-of-type ve :last-of-type öğelerini seçebilirsiniz. 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 div değil paragraf olduğundan hiçbir öğe kırmızı renkte boyanmaz. Bu bağlamda :first-of-type sözde sınıfı faydalıdır.

.my-parent div:first-of-type {
    color: red;
}

İlk <div> ikinci alt öğe olsa da .my-parent öğesinin içindeki türde ilk öğe olduğundan bu kurala göre kırmızı renkte olur.

:nth-child ve :nth-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

İlk ve son alt öğelerle ve türlerle de sınırlı değilsiniz. :nth-child ve :nth-of-type sözde sınıfları, belirli bir dizinde bulunan bir öğeyi belirtmenize olanak tanır. CSS seçicilerdeki dizine ekleme 1'den başlar.

Bu sözde sınıflara bir dizinden daha fazlasını da iletebilirsiniz. Tüm çift sayıları seçmek istiyorsanız :nth-child(even) simgesini kullanabilirsiniz.

Ayrıca, An+B mikro söz dizimini kullanarak düzenli aralıklarla öğe bulan daha karmaşık seçiciler de oluşturabilirsiniz.

li:nth-child(3n+3) {
    background: yellow;
}

Bu seçici, 3. öğeden başlayarak her üç öğeyi seçer. Bu ifadedeki n, sıfırdan başlayan dizindir. 3 (3n), bu dizini ne kadar çarptığınızı gösterir.

7 <li> öğeniz olduğunu varsayalım. 3n+3, (3 * 0) + 3 olarak çevrildiği için seçilen ilk öğe 3'tür. Bir sonraki iterasyonda n 1 değerine yükseldiği için 6. öğe ((3 * 1) + 3)) seçilir. Bu ifade hem :nth-child hem de :nth-of-type için geçerlidir.

Bu tür bir seçiciyi bu n. çocuk test cihazında veya bu miktar seçici aracında deneyebilirsiniz.

:only-of-type

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Son olarak, :only-of-type ile belirli bir türdeki tek öğeyi bir kardeş grubu içinde bulabilirsiniz. Bu seçenek, yalnızca bir öğe içeren listeleri seçmek veya bir paragraftaki tek kalın öğeyi bulmak istediğinizde kullanışlıdır.

Boş öğeleri bulma

Bazen tamamen boş öğeleri tanımlamak yararlı olabilir. Bunun için de bir sözde sınıf vardır.

:empty

Browser Support

• 1
• 12
• 1
• 3.1

Source

Bir öğenin alt öğesi yoksa :empty sözde sınıfı geçerli olur. Ancak çocuklar yalnızca HTML öğeleri veya metin düğümleri değildir. Boşluk da olabilir. Aşağıdaki HTML'de hata ayıklama yaparken ve :empty ile neden çalışmadığını merak ederken bu durum kafa karıştırıcı olabilir:

<div>
</div>

Bunun nedeni, açılış ve kapanış <div> arasında boşluk olmasıdır. Bu nedenle boşluk kullanılamaz.

HTML üzerinde çok az kontrol sahibiyseniz ve WYSIWYG içerik düzenleyici gibi boş öğeleri gizlemek istiyorsanız :empty sözde sınıfı faydalı olabilir. Burada bir düzenleyici, alakasız ve boş bir paragraf eklemiş.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

:empty ile bu dosyayı bulup gizleyebilirsiniz.

.post :empty {
    display: none;
}

Birden fazla öğeyi bulma ve hariç tutma

Bazı sözde sınıflar, daha kompakt CSS yazmanıza yardımcı olur.

:is()

Browser Support

• 88
• 88
• 78
• 14

Source

Bir .post öğesindeki tüm h2, li ve img alt öğelerini bulmak istiyorsanız aşağıdaki gibi bir seçici listesi yazabilirsiniz:

.post h2,
.post li,
.post img {
    …
}

:is() sözde sınıfı ile daha kompakt bir sürüm yazabilirsiniz:

.post :is(h2, li, img) {
    …
}

:is sözde sınıfı, seçici listesinden daha kompakt olmasının yanı sıra daha esnektir. Çoğu durumda, bir seçici listesinde hata veya desteklenmeyen bir seçici varsa seçici listesinin tamamı artık çalışmaz. :is sözde sınıfında iletilen seçicilerde hata varsa geçersiz seçici yoksayılır ancak geçerli olanları kullanılır.

:not()

Browser Support

• 1
• 12
• 1
• 3.1

Source

:not() sözde sınıfını kullanarak da öğeleri hariç tutabilirsiniz. Örneğin, class özelliği olmayan tüm bağlantılara stil uygulamak için bu özelliği kullanabilirsiniz.

a:not([class]) {
    color: blue;
}

:not sözde sınıfı da erişilebilirliği iyileştirmenize yardımcı olabilir. Örneğin, boş bir değer olsa bile bir <img> öğesinin bir alt öğesi olması gerekir. Bu nedenle, geçersiz resimlere kalın kırmızı bir dış çizgi ekleyen bir CSS kuralı yazabilirsiniz:

img:not([alt]) {
    outline: 10px red;
}

Öğrendiklerinizi test etme

Sözde sınıflarla ilgili bilginizi test edin

Sanal sınıflar, bir sınıf bir öğeye dinamik olarak uygulanmış gibi davranırken sanal öğeler öğenin kendisi üzerinde işlem yapar.

Doğru

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

Yanlış

Sanal öğeler parçalar için, sanal sınıflar ise durum içindir.

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

:is()

🎉

:target

İşlevsel sözde sınıflar, parametreleri kabul ettiklerini belirtmek için kendilerinden sonra () karakterini kullanır.

:empty

İşlevsel sözde sınıflar, parametreleri kabul ettiklerini belirtmek için kendilerinden sonra () karakterini kullanır.

:not()

🎉

Aşağıdaki sözde sınıflardan hangisi kullanıcı etkileşimini belirtir?

: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

🎉