Bakacağımız bir sonraki seçici kümesi, sözde sınıflar ve sözde öğeler olarak adlandırılır. Bunlardan çok sayıda bulunur. Genellikle de özel amaçlara hizmet ederler. Bunları nasıl kullanacağınızı öğrendikten sonra, başarmaya çalıştığınız görev için işe yarayan bir şey olup olmadığını görmek için listeye bakabilirsiniz.
Sözde sınıf nedir?
Sözde sınıflar, belirli bir durumda olan öğeleri seçen seçicidirler. Örneğin, bunlar kendi türlerinin ilk öğesidir veya fare işaretçisi tarafından üzerlerine gelinir. Belgenizin bir bölümüne bir sınıf uygulamışsınız gibi davranma eğilimindedirler, genellikle işaretlemenizdeki fazla sınıfları azaltmanıza yardımcı olur ve size daha esnek, sürdürülebilir kod verirler.
Sözde sınıflar, iki nokta üst üste ile başlayan anahtar kelimelerdir:
:pseudo-class-name
Basit sözde sınıf örneği
Basit bir örneğe bakalım. Bir makaledeki ilk paragrafı daha büyük ve kalın yapmak istersek, klasik yöntemle o paragrafa bir sınıf ekleyebilir ve ardından o sınıfa CSS ekleyebiliriz:
.first {
font-size: 120%;
font-weight: bold;
}
<article>
<p class="first">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

Ancak, burada can sıkıcı şeylerle karşılaşabiliriz – ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımamız gerekir. Sınıfı eklemek yerine, :first-child
sözde sınıf seçiciyi kullanabiliriz – bu her zaman makaledeki ilk alt öğeyi hedefleyecektir ve artık HTML’yi düzenlememiz gerekmeyecektir.
article p:first-child {
font-size: 120%;
font-weight: bold;
}
<article>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

Tüm sözde sınıflar aynı şekilde davranırlar. HTML’nize bir sınıf eklemişsiniz gibi davranarak, belgenizin belirli bir durumda olan bir kısmını hedeflerler. Bazı örnekleri şunlardır:
Not: Sözde sınıfları ve öğeleri, önlerinde herhangi bir öğe seçici olmadan yazmak da geçerlidir. Yukarıdaki örnekte sadece :first-child
yazsaydınız ilk çocuğu olan herhangi bir öğe için geçerli olacaktı. Bu nedenle daha spesifik olmanız gerekir.
Kullanıcı eylemi sözde sınıfları
Bazı sözde sınıflar, yalnızca kullanıcı belgeyle bir şekilde etkileşim kurduğunda uygulanır. Bazen dinamik sözde sınıflar olarak adlandırılan bu kullanıcı eylemi sözde sınıfları, kullanıcı onunla etkileşime girdiğinde öğeye bir sınıf eklenmiş gibi davranır. Örnekler şunları içerir:
:hover
– bu yalnızca, kullanıcı işaretçisini bir öğenin, tipik olarak bir bağlantının, üzerine getirdiğinde geçerlidir.:focus
– yalnızca kullanıcı klavye kontrollerini kullanarak öğeye odaklanırsa geçerlidir.
a:link,
a:visited {
color: rebeccapurple;
font-weight: bold;
}
a:hover {
color:hotpink;
}
<p><a href="">Hover over me</a></p>
Sözde eleman nedir?
Sözde öğelere benzerdirler. Ancak, mevcut öğelere bir sınıf uygulamak yerine, biçimlendirmeye tamamen yeni bir HTML öğesi eklemişsiniz gibi davranırlar. Sözde öğeler çift kolonla başlar ::
.
::pseudo-element-name
Not: Bazı eski sözde öğeler tek iki nokta üst üste sözdizimini kullanırdı, bu nedenle bunu bazı kodlarda veya örneklerde görebilirsiniz. Modern tarayıcılar, geriye dönük uyumluluk için tek veya çift kolon sözdizimi ile erken sözde öğeleri destekler.
Örneğin, bir paragrafın ilk satırını seçmek isterseniz, onu bir <span>
öğesine sarabilir ve bir öğe seçiciyi kullanabilirsiniz; ancak, sardığınız sözcük sayısı ana öğenin genişliğinden daha uzun veya daha kısaysa bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilmediğimiz için – ekran genişliği veya yazı tipi boyutu değişirse bu değişecektir – HTML ekleyerek bunu sağlam bir şekilde yapmak imkansızdır.
::first-line
Sözde öğesi bu işi size güvenilir bir şekilde yapar – kelimeler sayısı artarsa veya azalırsa bile hala sadece ilk satırı seçer.
article p::first-line {
font-size: 120%;
font-weight: bold;
}
<article>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

<span>
İlk biçimlendirilmiş satırın etrafına sihirli bir şekilde sarılmış ve satır uzunluğu her değiştiğinde güncellenmiş gibi davranır .
Bunun her iki paragrafın ilk satırını seçtiğini görebilirsiniz.
Sözde sınıfları ve sözde öğeleri birleştirme
İlk paragrafın ilk satırını kalın yapmak istiyorsanız :first-child
ve ::first-line
seçicilerini birlikte zincirleyebilirsiniz. Aşağıdaki CSS’yi kullanması için önceki örneği düzenlemeyi deneyin. Bir <article>
öğesinin içindeki ilk <p>
elementinin ilk satırını seçmek istediğimizi söylüyoruz:
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
::before ve ::after ile içerik oluşturma
CSS kullanarak belgenize içerik eklemek için content
özelliği ile birlikte kullanılan birkaç özel sözde öğe vardır.
Bunları, aşağıdaki örnekte olduğu gibi bir metin dizisi eklemek için kullanabilirsiniz. content
özelliğinin metin değerini değiştirmeyi deneyin ve çıktının da değiştiğini görün. ::before
sözde öğesi öğenin başına içerik eklerken ::after
sözde öğesi sonuna ekler.
.box::before {
content: "This should show before the other content."
}
<p class="box">Content in the box in my HTML page.</p>

CSS’den metin dizeleri eklemek aslında web’de çok sık yaptığımız bir şey değildir, çünkü bu metne bazı ekran okuyucular erişemez ve gelecekte birisinin bulması ve düzenlemesi zor olabilir.
Bu sözde öğelerin daha geçerli bir kullanımı, örneğin aşağıdaki örnekte eklenen küçük ok gibi bir simge eklemektir; bu, bir ekran okuyucu tarafından okunmasını istemeyeceğimiz görsel bir göstergedir:
.box::after {
content: " ➥"
}
<p class="box">Content in the box in my HTML page.</p>

Bu sözde öğeler, aynı zamanda, sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklıkla kullanılır.
Bu sonraki örnekte, ::before
sözde elemanı kullanarak boş bir dize ekledik. Bunu display:block
ile genişlik ve yükseklikle şekillendirebilmemiz için ayarladık. Daha sonra, herhangi bir öğe gibi biçimlendirmek üzere CSS’yi kullandık. CSS ile oynayabilir ve nasıl göründüğünü ve davrandığını değiştirebilirsiniz.
.box::before {
content: "";
display: block;
width: 100px;
height: 100px;
background-color: rebeccapurple;
border: 1px solid black;
}
<p class="box">Content in the box in my HTML page.</p>

::before
ile ::after
sözde öğelerin ve content
özelliğinin birlikte kullanımına CSS’de “Oluşturulan İçerik” denir. Bu tekniğin çeşitli görevler için kullanıldığını sık sık görürsünüz. Bu öğelerle kullanılan harika bir site CSS Arrow Please sitesidir. CSS ile bir ok oluşturmanıza yardımcı olur. Okunuzu oluştururken CSS’ye bakın ::before
ve ::after
sözde öğelerini göreceksiniz. Bu seçicileri her gördüğünüzde content
özelliğine bakarak belgeye ne eklendiğini görebilirsiniz.
Referans bölümü
Çok sayıda sözde sınıf ve sözde öğe bulunur ve başvurulacak bir referans listesi faydalı olabilir. Aşağıda, MDN’deki referans sayfalarına bağlantılar ile birlikte bunları listeleyen tablolar bulunmaktadır. Hedefleyebileceğiniz türden şeyleri görmek için bunu referans olarak kullanabilirsiniz.
sözde sınıflar
Seçici | Açıklama |
---|---|
:active | Kullanıcı bir öğeyi etkinleştirdiğinde (örneğin tıkladığında) eşleşir. |
:any-link | hem :link hem de :visited bağlantı halleri. |
:blank | Giriş değeri boş olan bir <input> öğesiyle eşleşir. |
:checked | Seçili durumdaki bir radyo düğmesi veya onay kutusuyla eşleşir. |
:current | Şu anda görüntülenmekte olan öğeyle veya öğenin bir üst öğesiyle eşleşir. |
:default | Bir dizi benzer öğe arasında varsayılan olan bir veya daha fazla UI öğesiyle eşleşir. |
:dir | Yöne göre bir öğe seçin (HTML dir niteliği veya CSS direction özelliğinin değeri). |
:disabled | Devre dışı bırakılmış durumda olan kullanıcı arabirimi öğeleriyle eşleşir. |
:empty | İsteğe bağlı olarak boşluk dışında alt öğesi olmayan bir öğeyle eşleşir. |
:enabled | Etkin durumda olan kullanıcı arabirimi öğeleriyle eşleşir. |
:first | Sayfalanmış Medyada, ilk sayfayı eşleşir. |
:first-child | Kardeşleri arasında birinci olan bir öğeyle eşleşir. |
:first-of-type | Kardeşleri arasında belirli bir türden ilk olan bir öğeyle eşleşir. |
:focus | Bir öğeye odaklanıldığında eşleşir. |
:focus-visible | Bir öğenin odağı olduğunda ve odağın kullanıcı tarafından görülebilmesi gerektiğinde eşleşir. |
:focus-within | Odaklı bir öğe ile odak olan bir alt öğeye sahip bir öğeyle eşleşir. |
:future | Geçerli öğeden sonraki öğeleri eşleştirir. |
:hover | Kullanıcı bir öğenin üzerine geldiğinde eşleşir. |
:indeterminate | Değeri belirsiz durumda olan UI öğeleriyle eşleşir, -genellikle onay kutuları. |
:in-range | Değeri aralık içinde olan bir öğeyi eşleştirir. |
:invalid | Geçersiz durumdaki <input> gibi bir öğeyle eşleşir. |
:lang | Dile dayalı bir öğeyle eşleşir (HTML lang özniteliğinin değeri ). |
:last-child | Kardeşleri arasında en son olan bir öğeyle eşleşir. |
:last-of-type | Kardeşleri arasında en son olan belirli bir türdeki bir öğeyle eşleşir. |
:left | Sayfalanmış Medyada, sol sayfalarla eşleşir. |
:link | Ziyaret edilmemiş bağlantılarla eşleşir. |
:local-link | Geçerli belgeyle aynı sitede bulunan sayfaları işaret eden bağlantıları eşleştirir. |
:is() | Parametre olarak verilen listedeki seçicilerden herhangi biriyle eşleşir. |
:not | Bu seçiciye değer olarak iletilen seçiciler tarafından eşleşmeyen şeyleri eşleştirir. |
:nth-child | Kardeşler listesindeki öğeleri eşleştirir — kardeşler, an+b biçimindeki bir formülle eşleştirilir (örn. 2n + 1, 1, 3, 5, 7, vb. öğelerle eşleşir. Tüm tek olanlar.) |
:nth-of-type | Belirli bir türdeki (örn. <p> öğeleri) kardeşler listesindeki öğeleri eşleştirir — kardeşler, an+b biçimindeki bir formülle eşleştirilir (örn. 2n + 1, bu öğe türüyle eşleşir, 1, 3, 5, 7, vb. Tüm tek olanlar.) |
:nth-last-child | Sondan geriye doğru sayarak kardeşler listesindeki öğeleri eşleştirir. Kardeşler, an+b biçimindeki bir formülle eşleştirilir (örneğin, 2n + 1 dizideki son öğeyle, ondan önceki iki öğeyle, sonra ondan önceki iki öğeyle, vb. eşleşir. Tüm tek olanlar, sondan sayılır) |
:nth-last-of-type | <p> Sondan geriye doğru sayarak, belirli bir türdeki (örn. öğeler) kardeşler listesindeki öğeleri eşleştirir. Kardeşler, an+b biçimindeki bir formülle eşleştirilir (örn. 2n + 1, dizideki o türün son öğesiyle, sonra ondan önce iki öğeyle, sonra ondan önce iki öğeyle, vb. eşleşir. Tüm tek olanlar, sayma sondan.) |
:only-child | Kardeşi olmayan bir öğeyle eşleşir. |
:only-of-type | Kardeşleri arasında türünün tek örneği olan bir öğeyle eşleşir. |
:optional | Zorunlu olmayan öğeler eşleştirilir. |
:out-of-range | Değeri aralık dışında olan bir öğeyi eşleştirir. |
:past | Geçerli öğeden önceki öğeleri eşleştirir. |
:placeholder-shown | Yer tutucu metni gösteren bir giriş öğesiyle eşleşir. |
:playing | Bir ses, video veya benzeri kaynağı temsil eden ve bu öğe “oynatılırken” “oynatılabilen” veya “duraklatılabilen” bir öğeyle eşleşir. |
:paused | Bir ses, video veya benzeri kaynağı temsil eden ve bu öğe “duraklatıldığında” “oynatılabilen” veya “duraklatılabilen” bir öğeyle eşleşir. |
:read-only | Kullanıcı tarafından değiştirilemeyen bir öğeyle eşleşir. |
:read-write | Kullanıcı tarafından değiştirilebilen öğeyle eşleşir. |
:required | Gerekli olan öğeleri eşleştirir. |
:right | Sayfalanmış Medyada, sağ sayfalarla eşleşir. |
:root | Belgenin kökü olan bir öğeyle eşleşir. |
:scope | Kapsam öğesi olan herhangi bir öğeyle eşleşir. |
:valid | Geçerli durumda olan bir <input> öğesi gibi bir öğeyle eşleşir. |
:target | Geçerli URL’nin hedefi ile eşleşen öğelerle eşleşir |
:visited | Ziyaret edilen bağlantılarla eşleşir. |
sözde öğeler
Seçici | Açıklama |
---|---|
::after | content dışında bir değere sahip özellikle birlikte kullanılırsa, kaynak öğenin gerçek içeriğinden sonra görünen, stilize edilebilir none harici bir öğe ekler. |
::before | content dışında bir değere sahip özellikle birlikte kullanılırsa, kaynak öğenin gerçek içeriğinden önce görünen, stilize edilebilir none harici bir öğe ekler. |
::first-letter | Öğenin ilk harfiyle eşleşir. |
::first-line | İçeren öğenin ilk satırıyla eşleşir. |
::grammar-error | Tarayıcı tarafından işaretlendiği şekliyle dil bilgisi hatası içeren belgenin bir bölümüyle eşleşir. |
::marker | Genellikle bir madde işareti veya sayı içeren bir liste öğesinin işaret kutusuyla eşleşir. |
::selection | Belgenin seçilen bölümüyle eşleşir. |
::spelling-error | Tarayıcı tarafından işaretlenen belgenin yazım hatası içeren bir bölümüyle eşleşir. |