Sözde sınıflar ve sözde öğeler

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.