Sözde sınıflar

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

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

Sözde sınıf, durum değişikliklerine ve dış 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. Bunlar seçiciler modülünde ele alınmıştır ve bu modül size bunları daha ayrıntılı bir şekilde anlatacaktır.

Önceki modülde hakkında daha fazla bilgi edinebileceğiniz yapay öğelerin aksine sözde sınıflar, ilgili öğenin genel parçalarına stil eklemek yerine bir öğenin içinde bulunabileceği belirli durumlara bağlanır.

Etkileşimli durumlar

Aşağıdaki sanal sınıflar, bir kullanıcının sayfanızla kurduğu etkileşim nedeniyle uygulanır.

:hover

Kullanıcının fare veya dokunmatik yüzey gibi bir işaretleme cihazı varsa ve bunu bir öğenin üzerine yerleştiriyorsa stilleri uygulamak için :hover ile bu duruma bağlanabilirsiniz. Bu, bir öğeyle etkileşimde bulunulabileceğini ipucu için yararlı bir yoldur.

:active

Bu durum, tıklama yayınlanmadan önce bir öğeyle (ör. tıklama) aktif bir şekilde etkileşimde bulunduğunda tetiklenir. Fare gibi bir işaretleme cihazı kullanılırsa bu durum, tıklamanın başladığı ve henüz serbest bırakılmadığı anlamına gelir.

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

<button> gibi bir öğeye odaklanabiliyorsanız bu duruma :focus sözde sınıfıyla tepki verebilirsiniz.

Ayrıca, öğenizin bir alt öğesine odaklanılırsa :focus-within ile tepki verebilirsiniz.

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

button:focus {
    outline: none;
}

Bu CSS, bir öğeye odaklanıldığı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 kullanarak odağın o anda nerede olduğunu takip edemezler. :focus-visible sayesinde bir öğe klavye aracılığıyla odak aldığında bir odak stili sunabilir ve bir işaretçi cihaz ile etkileşimde bulunduğunda bunu önlemek için outline: none kuralını kullanabilirsiniz.

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çeriyorsa bu öğeye stiller ekleyebilirsiniz.

#content:target {
    background: yellow;
}

Bu, atlama bağlantısı aracılığıyla bir web sitesindeki ana içerik gibi özel olarak bağlantı verilmiş olabilecek alanları vurgulamak için yararlıdır.

Tarihi durumlar

:link

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

:visited

:visited sözde sınıfı kullanarak kullanıcı tarafından daha önce ziyaret edilmiş bir bağlantının stilini belirleyebilirsiniz. Bu, :link ifadesinin tersi bir durumdur ancak güvenlik nedeniyle kullanabileceğiniz daha az CSS mülkünüz vardır. Yalnızca color, background-color, border-color, outline-color ve SVG fill ile stroke renklerinin stilini belirleyebilirsiniz.

Sıra önemlidir

Bir :visited stili tanımlarsanız en azından eşit derecede belirginliğe sahip bir sözde bağlantı sınıfı tarafından geçersiz kılınabilir. Bu nedenle, sözde sınıf içeren bağlantıların stilini belirli bir sırada oluşturmak 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 bu öğelerin kendileriyle etkileşim sırasında içerebileceği çeşitli durumlarda seçebilir.

:disabled ve :enabled

<button> gibi bir form öğesi tarayıcı tarafından devre dışı bırakılırsa :disabled sözde sınıfıyla bu duruma bağlanabilirsiniz. :enabled sözde sınıfının karşıtı durum için kullanılabilir ancak form öğeleri de varsayılan olarak :enabled değerine sahiptir. Bu nedenle, bu sözde sınıfa ulaştığınızı bulamayabilirsiniz.

:checked ve :indeterminate

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

:checked durumu ikili(doğru veya yanlış) bir durumdur ancak işaretlenmedikleri veya işaretlenmedikleri zaman onay kutuları arası durumda olur. Bu, :indeterminate durumu olarak bilinir.

Bu duruma bir örnek olarak, bir gruptaki tüm onay kutularını işaretleyen bir "tümünü seç" denetiminizin olması gösterilebilir. Kullanıcı daha sonra bu onay kutularından birinin işaretini kaldırırsa kök onay kutusu artık "tümü" seçeneğinin işaretli olduğunu göstermez, bu nedenle belirsiz bir duruma getirilmelidir.

<progress> öğesinin belirsiz durumu da biçimlendirilebilir. Yaygın bir kullanım alanı, ne kadar 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 no value özelliği varsa bu duruma stil eklemek için :placeholder-shown sözde sınıfı kullanılabilir. Alanda içerik olur olmaz placeholder olsun veya olmasın, bu durum artık geçerli olmaz.

Doğrulama durumları

HTML formu doğrulamaya :valid, :invalid ve :in-range gibi gerçek olmayan sınıflarla yanıt verebilirsiniz. :valid ve :invalid sözde sınıfları, eşleştirilmesi gereken bir pattern içeren e-posta alanı gibi bağlamlarda (ör. geçerli bir alan olması için) yararlıdır. Bu geçerli değer durumu kullanıcıya gösterilebilir ve kullanıcının bir sonraki alana güvenli bir şekilde geçebileceğini anlamasına yardımcı olur.

:in-range sözde sınıfı, bir girişte min ve max gibi bir sayı varsa ve değer bu sınırlar dahilindeyse kullanılabilir.

HTML formları sayesinde, required özelliğiyle 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.

Öğeleri dizinlerine, sıralarına ve bulundukları yere göre seçme

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

:first-child ve :last-child

İlk veya son öğeyi bulmak istiyorsanız :first-child ve :last-child seçeneklerini kullanabilirsiniz. Bu sözde sınıflar, kardeş öğelerden oluşan bir gruptaki ilk veya son öğeyi döndürür.

:only-child

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

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

Başlangıçta :first-child ve :last-child ile aynı şeyi yapı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>

Bu CSS:

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

İlk alt öğe div değil bir paragraf olduğundan hiçbir öğe kırmızı renkte olmaz. :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 yine .my-parent öğesi içindeki ilk türün ilk öğesi olduğundan bu kuralda kırmızı renkte olur.

: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 dizinde olan bir öğeyi belirtmenize olanak tanır. CSS seçicilerdeki dizine ekleme işlemi 1'den başlar.

Bu sözde sınıflara da bir dizinden daha fazlasını aktarabilirsiniz. Tüm çift öğeleri seçmek isterseniz :nth-child(even) kullanabilirsiniz.

An+B mikro söz dizimi kullanılarak öğeleri düzenli aralıklarla aralıklı olarak bulan daha karmaşık seçiciler de oluşturabilirsiniz.

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

Bu seçici, 3. öğeden başlayarak her üçüncü öğeyi seçer. Bu ifadedeki n, sıfırdan başlayan dizindir. 3 (3n), söz konusu dizini çarptığınız sayıyı ifade eder.

7 <li> öğeniz olduğunu varsayalım. 3n+3, (3 * 0) + 3 diline çevrildiği için seçilen ilk öğe 3 oldu. Bir sonraki yinelemede öğe 6'yı seçer. Çünkü n artık 1 değerine artmıştır ve (3 * 1) + 3). Bu ifade hem :nth-child hem de :nth-of-type için çalışır.

Bu n. alt test aracında veya bu miktar seçici aracında bu tür bir seçiciyi istediğiniz gibi değiştirebilirsiniz.

:only-of-type

Son olarak, kardeşler grubundaki belirli bir türdeki tek öğeyi :only-of-type ile bulabilirsiniz. Bu, yalnızca tek öğe içeren listeleri seçmek veya bir paragraftaki tek kalın harflerle yazılmış öğeyi bulmak istiyorsanız yararlı olur.

Boş öğeleri bulma

Tamamen boş öğeleri tanımlamak bazen yararlı olabilir ve bunun için bir sözde sınıf vardır.

:empty

Bir öğenin alt öğesi yoksa :empty sözde sınıfı bunlara uygulanır. Alt öğeler sadece HTML öğeleri veya metin düğümleri değildir. Aynı zamanda boşluk da olabilirler. Aşağıdaki HTML'de hata ayıklarken ve bunun neden :empty ile çalışmadığını merak ederken kafa karıştırıcı olabilirler:

<div>
</div>

Bunun nedeni, <div> açılışı ile kapanışı arasında boşluk olmasıdır. Bu boşluk çalışmaz.

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

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

:empty ile bu bilgileri bulabilir ve gizleyebilirsiniz.

.post :empty {
    display: none;
}

Birden çok öğeyi bulma ve hariç tutma

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

:is()

Bir .post öğesindeki h2, li ve img alt öğelerinin tümünü 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 yalnızca daha kompakt değildir, aynı zamanda daha toparlayıcıdır. Çoğu durumda, seçici listesinde bir hata veya desteklenmeyen seçici varsa seçici listesinin tamamı artık çalışmaz. :is sözde sınıfındaki iletilen seçicilerde hata varsa geçersiz seçiciyi yoksayar ancak geçerli olanları kullanır.

:not()

:not() sözde sınıfıyla öğeleri de hariç tutabilirsiniz. Örneğin, class özelliği olmayan tüm bağlantıların stilini belirlemek için bunu kullanabilirsiniz.

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

:not sözde sınıf, erişilebilirliği iyileştirmenize de yardımcı olabilir. Örneğin, <img> öğesinde boş bir değer olsa bile alt bulunmalıdır. 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 sınayın

Sanal derslerle ilgili bilginizi test edin