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
Sözde sınıflar, bir sınıfa dinamik olarak uygulanmış gibi davranırken, sözde öğeler öğenin kendisine göre hareket eder.
:
kullanımına dikkat edinAşağıdakilerden hangileri işlevsel bir sözde sınıftır?
:is()
:target
()
bulunur.:empty
()
bulunur.:not()
Aşağıdaki sanal sınıflardan hangisi kullanıcı etkileşiminden kaynaklanır?
:hover
:press
:squeeze
:target
:focus-within
Aşağıdakilerden hangileri <form>
eyaletteki sözde sınıftır?
:enabled
:fresh
:indeterminate
:checked
:in-range
:loading
:valid