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.

İlişkili olduğu konular : ders

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çiciAçıklama
:activeKullanıcı bir öğeyi etkinleştirdiğinde (örneğin tıkladığında) eşleşir.
:any-linkhem :link hem de  :visited bağlantı halleri.
:blankGiriş değeri boş olan bir <input> öğesiyle eşleşir.
:checkedSeç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.
:defaultBir dizi benzer öğe arasında varsayılan olan bir veya daha fazla UI öğesiyle eşleşir.
:dirYöne göre bir öğe seçin (HTML dir niteliği veya CSS direction özelliğinin değeri).
:disabledDevre 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.
:enabledEtkin durumda olan kullanıcı arabirimi öğeleriyle eşleşir.
:firstSayfalanmış Medyada, ilk sayfayı eşleşir.
:first-childKardeşleri arasında birinci olan bir öğeyle eşleşir.
:first-of-typeKardeşleri arasında belirli bir türden ilk olan bir öğeyle eşleşir.
:focusBir öğeye odaklanıldığında eşleşir.
:focus-visibleBir öğenin odağı olduğunda ve odağın kullanıcı tarafından görülebilmesi gerektiğinde eşleşir.
:focus-withinOdaklı bir öğe ile odak olan bir alt öğeye sahip bir öğeyle eşleşir.
:futureGeçerli öğeden sonraki öğeleri eşleştirir.
:hoverKullanıcı bir öğenin üzerine geldiğinde eşleşir.
:indeterminateDeğeri belirsiz durumda olan UI öğeleriyle eşleşir, -genellikle onay kutuları.
:in-rangeDeğeri aralık içinde olan bir öğeyi eşleştirir.
:invalidGeçersiz durumdaki <input> gibi bir öğeyle eşleşir.
:langDile dayalı bir öğeyle eşleşir  (HTML lang özniteliğinin değeri ).
:last-childKardeşleri arasında en son olan bir öğeyle eşleşir.
:last-of-typeKardeşleri arasında en son olan belirli bir türdeki bir öğeyle eşleşir.
:leftSayfalanmış Medyada, sol sayfalarla eşleşir.
:linkZiyaret edilmemiş bağlantılarla eşleşir.
:local-linkGeç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.
:notBu seçiciye değer olarak iletilen seçiciler tarafından eşleşmeyen şeyleri eşleştirir.
:nth-childKardeş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-typeBelirli 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-childSondan 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-childKardeşi olmayan bir öğeyle eşleşir.
:only-of-typeKardeşleri arasında türünün tek örneği olan bir öğeyle eşleşir.
:optionalZorunlu olmayan öğeler eşleştirilir.
:out-of-rangeDeğeri aralık dışında olan bir öğeyi eşleştirir.
:pastGeçerli öğeden önceki öğeleri eşleştirir.
:placeholder-shownYer tutucu metni gösteren bir giriş öğesiyle eşleşir.
:playingBir ses, video veya benzeri kaynağı temsil eden ve bu öğe “oynatılırken” “oynatılabilen” veya “duraklatılabilen” bir öğeyle eşleşir.
:pausedBir ses, video veya benzeri kaynağı temsil eden ve bu öğe “duraklatıldığında” “oynatılabilen” veya “duraklatılabilen” bir öğeyle eşleşir.
:read-onlyKullanıcı tarafından değiştirilemeyen bir öğeyle eşleşir.
:read-writeKullanıcı tarafından değiştirilebilen öğeyle eşleşir.
:requiredGerekli olan öğeleri eşleştirir.
:rightSayfalanmış Medyada, sağ sayfalarla eşleşir.
:rootBelgenin kökü olan bir öğeyle eşleşir.
:scopeKapsam öğesi olan herhangi bir öğeyle eşleşir.
:validGeçerli durumda olan bir <input> öğesi gibi bir öğeyle eşleşir.
:targetGeçerli URL’nin hedefi ile eşleşen öğelerle eşleşir
:visitedZiyaret edilen bağlantılarla eşleşir.

sözde öğeler

SeçiciAçıklama
::aftercontent 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.
::beforecontent 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-errorTarayıcı tarafından işaretlendiği şekliyle dil bilgisi hatası içeren belgenin bir bölümüyle eşleşir.
::markerGenellikle bir madde işareti veya sayı içeren bir liste öğesinin işaret kutusuyla eşleşir.
::selectionBelgenin seçilen bölümüyle eşleşir.
::spelling-errorTarayıcı tarafından işaretlenen belgenin yazım hatası içeren bir bölümüyle eşleşir.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

konular

Okumaya devam et!
Sonraki Yazı: Birleştiriciler

Bakacağımız son seçicilere birleştirici denir, çünkü bunlar diğer seçicileri birbirleriyle ve belgedeki içeriğin konumuyla yararlı bir ilişki sağlayacak şekilde birleştirirler.

HTML5 için input placeholder rengini CSS ile değiştirme

Chrome, input[type=text] öğeleri için yer tutucu özelliğini (placeholder) destekler – muhtemelen diğer tarayıcılar için de bu geçerli.

Renk Modelleri: RGB, HSV, HSL

Bu bölüm, RGB, HSV ve HSL renk modelleri hakkında bilgisayar grafikleri (Web sayfası, resim) perspektifinden bir giriş sağlayacak.

Farklı metin yönlerini işleme

Şimdiye kadar CSS öğrenmemizde karşılaştığımız birçok özellik ve değer, ekranımızın fiziksel boyutlarına bağlandı.

Flex Öğeleri Sıralama

Flexbox ve Grid gibi yeni düzen yöntemleri, içeriğin sırasını kontrol etme olanağını da beraberinde getirir.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.