Google I/O'ya katıldığınız için teşekkürler! İçerikleri isteğe bağlı olarak izleyin.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Sözde sınıflar

The CSS Podcast - 015: Pseudo-classes

Örneğin, bir e-posta kayıt formunuz var ve geçersiz bir e-posta adresi içeriyorsa e-posta formu alanının kırmızı bir kenarlığa sahip olmasını istiyorsunuz. 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.

Sözde sınıf, durum değişikliklerine ve harici faktörlere göre stiller uygulamanıza olanak tanır. Bu, 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ınmaktadır ve bu modülde daha ayrıntılı olarak açıklanacaktır.

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

Etkileşimli durumlar

Aşağıdaki sözde sınıflar, kullanıcının sayfanızla etkileşimi nedeniyle geçerlidir.

`:hover`

Browser Support

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 duruma bağlanarak stil uygulayabilirsiniz. Bu, bir öğeyle etkileşim kurulabileceğini belirtmek için kullanışlı bir yöntemdir.

`:active`

Browser Support

Source

Bu durum, tıklama bırakılmadan önce bir öğeyle aktif olarak etkileşimde bulunulduğunda (ör. tıklama) tetiklenir. Fare gibi bir işaretleme cihazı kullanılıyorsa bu durum, tıklama başladığında ve henüz bırakılmadığında geçerlidir.

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

Browser Support

Source

Bir öğe odaklanabiliyorsa (ör. <button>), :focus sözde sınıfıyla bu duruma tepki verebilirsiniz.

Ayrıca, öğenizin bir alt öğesi odaklandığında :focus-within ile tepki verebilirsiniz.

Düğmeler gibi odaklanılabilir öğeler, odaklandıklarında (tıklandıklarında bile) 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 durum, 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 nerede olduğunu takip edemezler. :focus-visible ile, bir öğe klavye kullanılarak odaklandığında odak stili sunabilir, aynı zamanda bir işaretçi cihaz 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`

Browser Support

Source

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

<article id="content">
    <!-- ... -->
</article>

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

#content:target {
    background: yellow;
}

Bu özellik, atlama bağlantısı kullanarak bir web sitesindeki ana içerik gibi özellikle bağlantı verilmiş olabilecek alanları vurgulamak için kullanışlıdır.

Tarihi eyaletler

`:link`

Browser Support

Source

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

`:visited`

Kullanıcı tarafından daha önce ziyaret edilmiş bir bağlantıyı :visited sözde sınıfını kullanarak stilize edebilirsiniz. Bu, :link özelliğinin tam tersidir ancak güvenlik nedenleriyle 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 stilize edebilirsiniz.

Sıra önemlidir

Bir :visited stili tanımlarsanız bu stil, en az eşit özellikteki bir bağlantı sözde sınıfı tarafından geçersiz kılınabilir. Bu nedenle, bağlantıları belirli bir sırayla sözde sınıflarla stilize etmek için LVHA kuralını kullanmanız önerilir: :link, :visited, :hover, :active.

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

Not: Güvenlik nedeniyle, yalnızca :link veya ziyaret edilmemiş durum tarafından tanımlanan stilleri :visited sözde sınıfıyla değiştirebilirsiniz. Bu nedenle, değiştirilebilir stilleri önce 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 öğelerin etkileşim sırasında bulunabileceği çeşitli durumlarda seçebilir.

`:disabled` ve `:enabled`

Browser Support

Source

Bir form öğesi (ör. <button>) 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ı, karşıt durum için kullanılabilir. Ancak form öğeleri de varsayılan olarak :enabled olduğundan bu sözde sınıfı kullanmanız gerekmeyebilir.

`:checked` ve `:indeterminate`

Browser Support

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ı ne işaretli ne de işaretsiz olduklarında ara 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ç" kontrolü verilebilir. Kullanıcı daha sonra bu onay kutularından birinin işaretini kaldırırsa kök onay kutusu artık "tümü"nün işaretli olduğunu göstermez ve belirsiz bir duruma getirilmelidir.

<progress> öğesinin, stil verilebilen belirsiz bir durumu da vardır. Yaygın bir kullanım alanı, ne kadar daha gerektiğini belirtmek için ilerleme çubuğuna çizgili bir görünüm vermektir.

`:placeholder-shown`

Browser Support

Source

Bir form alanında placeholder özelliği varsa ve değer yoksa, :placeholder-shown sözde sınıfı, bu duruma stil eklemek için kullanılabilir. Alana içerik girildiği anda (placeholder olup olmadığına bakılmaksızın) bu durum geçerliliğini kaybeder.

Doğrulama durumları

Browser Support

Source

:valid, :invalid ve :in-range gibi sözde sınıflarla HTML formu doğrulama işlemine 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 kullanışlıdır. Bu geçerli değer durumu kullanıcıya gösterilebilir ve bir sonraki alana güvenli bir şekilde geçebileceğini anlamasına yardımcı olur.

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

HTML formlarında, 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ıyla seçilebilir.

Öğeleri endekslerine, sıralarına ve oluşumlarına göre seçme

Öğeleri dokümandaki konumlarına göre seçen bir grup sözde sınıf vardır.

`:first-child` ve `:last-child`

Browser Support

Source

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

`:only-child`

Browser Support

Source

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

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

Browser Support

Source

İlk başta :first-child ve :last-child ile aynı işi 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>

Ayrıca şu CSS:

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

İlk alt öğe bir paragraf olduğundan ve div olmadığından hiçbir öğe kırmızı renkte olmaz. Bu bağlamda :first-of-type sözde sınıfı kullanışlıdır.

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

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

`:nth-child` ve `:nth-of-type`

Browser Support

Source

İlk ve son çocuklar ile 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çicilerinde indeksleme 1'den başlar.

:nth-last-child() ve :nth-last-of-type() sözde sınıfları, başlangıç yerine sondan itibaren sayar.

Bu sözde sınıflara dizinden daha fazla değer de iletebilirsiniz. Tüm çift öğeleri seçmek istiyorsanız :nth-child(even) kullanabilirsiniz.

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

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

Bu seçici, 3. öğeden başlayarak her üç öğeden birini seçer. Bu ifadedeki n, sıfırdan başlayan dizindir. 3 (3n), bu dizini ne kadar çarpacağı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 olur. Bir sonraki yinelemede n değeri 1 olarak arttığı için 6. öğe seçilir. Bu nedenle (3 * 1) + 3). Bu ifade hem :nth-child hem de :nth-of-type için geçerlidir.

:nth-child() ve :nth-last-child(), :nth-of-type()'ye benzer şekilde, eşleşmeleri bir seçiciyle filtrelemenize olanak tanıyan "of S" söz dizimini de destekler. li:nth-of-type(even), :nth-child(even of li) etiketine eş değerdir. :nth-of-type yalnızca öğe türüne (ör. li veya p) göre filtrelemenize olanak tanırken "of S" söz dizimi herhangi bir seçiciye göre filtrelemenize olanak tanır.

Tablonuz varsa her satıra şerit eklemek isteyebilirsiniz. tr:nth-child(even) ile diğer tüm satırları hedefleyebilirsiniz ancak bazı satırları filtreleyerek hariç tutuyorsanız bu işe yaramaz. hidden özelliğini uygulayarak filtreleme yaparsanız çift numaralı satırları seçmeden önce gizli öğeleri önceden filtrelemek için seçiciye of :not([hidden]) ekleyebilirsiniz.

tr:nth-child(even of :not([hidden])){
  background: lightgrey;
}

Bu tür bir seçiciyle nth-child test aracında veya miktar seçici aracında denemeler yapabilirsiniz.

`:only-of-type`

Browser Support

Source

Son olarak, :only-of-type ile kardeşler grubunda belirli bir türdeki tek öğeyi bulabilirsiniz. Bu özellik, 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. Bu amaçla kullanabileceğiniz bir sözde sınıf da vardır.

`:empty`

Browser Support

Source

Bir öğenin alt öğesi yoksa :empty sözde sınıfı bu öğe için geçerlidir. Ancak alt öğeler yalnızca HTML öğeleri veya metin düğümleri değildir. Aynı zamanda boşluk da olabilirler. Bu durum, aşağıdaki HTML'de hata ayıklarken ve neden :empty ile çalışmadığını merak ederken kafa karıştırıcı olabilir:

<div>
</div>

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

HTML üzerinde az kontrolünüz varsa ve WYSIWYG içerik düzenleyici gibi boş öğeleri gizlemek istiyorsanız :empty sözde sınıfı yararlı olabilir. Burada, bir düzenleyici 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 tür içerikleri 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

Source

Bir .post öğesindeki tüm h2, li ve img alt öğelerini bulmak istiyorsanız şöyle bir seçici listesi yazmanız gerektiğini düşünebilirsiniz:

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

:is() sözde sınıfıyla daha kısa 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 da affedicidir. Çoğu durumda, bir seçici listesinde hata veya desteklenmeyen 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çiciyi yoksayar ancak geçerli olanları kullanır.

`:not()`

Browser Support

Source

Ayrıca :not() sözde sınıfını kullanarak öğeleri hariç tutabilirsiniz. Örneğin, class özelliği olmayan tüm bağlantıları stilize etmek için kullanabilirsiniz.

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

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

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

`:has()`

Öğeleri, içlerinde bulunanlara göre stilize etmek isterseniz ne yapmanız gerekir? Bunu yapmak için :has() sözde sınıfını kullanabilirsiniz. Örneğin, simge içeren düğmelere stil uygulamak isteyebilirsiniz.

 button:has(svg) {
  /* ... */
}

En temel yapılandırmasında, önceki örnekte olduğu gibi :has() öğesini üst seçici olarak düşünebilirsiniz. Diğer öğeleri hedeflemek için eşleşen üst seçiciyi diğer seçicilerle birlikte de kullanabilirsiniz.

form:has(input:valid) label {
  font-weight: bold;
}

form:has(input:valid) label::after {
  content: "✅";
}

Bu örnekte, form girişinde valid sözde sınıfı olduğunda etiket öğesine ve label::after sözde öğesine stil uyguluyoruz.

:has() sözde sınıfı başka bir :has() sözde sınıfının içine yerleştirilemez ancak diğer sözde sınıflarla birleştirilebilir.

:is(h1, h2, h3):has(a) {
   /* ... */
}

Seçici listesi katıdır. Bu nedenle, listedeki seçicilerden herhangi biri geçersizse tüm stil kuralları yok sayılır.

.my-element:has(img, ::before) {
  /* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */
}

Anlayıp anlamadığınızı kontrol etme

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

Sözde sınıflar, bir sınıfa dinamik olarak öğe uygulanmış gibi davranırken sözde öğeler, öğenin kendisi üzerinde işlem yapar.

Doğru

Seçicide ayırt edici anahtar karakter olarak tek veya çift : kullanılıp kullanılmadığına dikkat edin.

Yanlış

Sözde öğeler parçalar, sözde sınıflar ise durumlar içindir.

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

:is()

🎉

:target

İşlevsel sözde sınıfların parametre kabul ettiğini belirtmek için sonlarına () eklenir.

:empty

İşlevsel sözde sınıfların parametre kabul ettiğini belirtmek için sonlarına () eklenir.

:not()

🎉

Aşağıdaki sözde 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

🎉

Sözde sınıflar Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

The CSS Podcast - 015: Pseudo-classes

Etkileşimli durumlar

:hover

:active

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

:target

Tarihi eyaletler

:link

:visited

Sıra önemlidir

Form durumları

:disabled ve :enabled

:checked ve :indeterminate

:placeholder-shown

Doğrulama durumları

Öğeleri endekslerine, sıralarına ve oluşumlarına göre seçme

:first-child ve :last-child

:only-child

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

:nth-child ve :nth-of-type

:only-of-type

Boş öğeleri bulma

:empty

Birden fazla öğeyi bulma ve hariç tutma

:is()

:not()

:has()

Anlayıp anlamadığınızı kontrol etme

Sözde sınıflar

`:hover`

`:active`

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

`:target`

`:link`

`:visited`

`:disabled` ve `:enabled`

`:checked` ve `:indeterminate`

`:placeholder-shown`

`:first-child` ve `:last-child`

`:only-child`

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

`:nth-child` ve `:nth-of-type`

`:only-of-type`

`:empty`

`:is()`

`:not()`

`:has()`