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ıracağız. Bunların sayıları oldukça fazladır ve genellikle özel amaçlara hizmet ederler. Bunları nasıl kullanacağını öğrendikten sonra, yapmaya çalıştığın bir görev için işe yarar bir şey olup olmadığını görmek için listeye göz atabilirsin. MDN referans sayfaları, her seçici için tarayıcı desteğini açıklamada her zamanki gibi yardımcı olur.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: Sözde sınıf ve sözde öğe seçicileri hakkında bilgi edinmek.

Sözde sınıf nedir?

Sözde sınıf, belirli bir durumda olan öğeleri seçen bir seçicidir. Örneğin, türlerinin ilk öğeleridirler veya fare imleci üzerlerine getirilmiştir. Belgenin bir kısmına bir sınıf uygulamış gibi davranma eğilimindediler, genellikle kurallardaki  fazla sınıfları azaltmana yardımcı olur ve  daha esnek, bakımı kolay bir kod sağlarlar.

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, bu paragrafa bir sınıf ekleyebilir ve ardından aşağıdaki ilk örnekte olduğu gibi bu sınıfa CSS uygulayabilirim:

Bunu sürdürmek gerçekten can sıkıcı olabilir — ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımam gerekir. Sınıfı eklemek yerine :first-child sözde sınıfını kullanabilirim — bu her zaman belgedeki ilk alt öğeyi hedefleyecek ve artık HTML'yi düzenlememe gerek kalmayacaktır.

Tüm sözde sınıflar aynı şekilde davranır. Belgemizin belirli bir durumda olan bir kısmını hedeflerler ve HTML'mize bir sınıf eklemişiz gibi davranırlar. MDN'de bulunan diğer bazı örneklere bir göz atmak yararlı olacaktır:

Not: Sözde sınıfları ve öğeleri, önünde herhangi bir öğe seçici olmadan yazmak geçerlidir. Yukarıdaki örnekte, öğe seçici olmadan :first-child'ı doğrudan yazabilirsin ve artık kural <article> öğesinin herhangi ilk çocuğu olan herhangi bir öğesiyle eşleşir — tür önemli değildir. first-child ile *:first-child'ın aynı işi yaptığını fakat evrensel seçici ile kullanımında okunurluluğun daha iyi olduğunu daha önceden açıklamıştır. Bununla birlikte, genellikle bundan daha fazla kontrole sahip olmak istenir, bu nedenle karekeristik özelliklere hakim olmalısın.

Kullanıcı eylemi sözde sınıfları

Bazı sözde sınıflar, yalnızca kullanıcının belgeyle etkileşim kurduğunda geçerlidir. 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 eklemiş gibi davranır. Örnek verirsek:

  • :hover — Farenin işaretçisi hangi öğenin üzerindeyse o öğeyi seçer. Farenin konumu değiştikçe seçilen öğede değişir. Fare işaretçisini bu listenin başındaki :hover dizesinin üzerine getirerek değişimi görebilirsin.
  • :focus — Bu sadece, kullanıcı öğeye klavye kontrolleri kullanarak odaklanılan öğeyi seçer.

Sözde öğe nedir?

Sözde öğeler de benzer şekilde davranırlar, ancak var olan öğelere bir sınıf uygulamak yerine, sanki hedeflediğin noktaya yeni bir HTML öğesi eklemişsin gibi davranırlar. Sözde öğeler çift iki nokta üst üste ile başlar  ::.

::pseudo-element-name

Not: İlk kullanılmaya başlanan bazı  sözde öğeler tek iki nokta üst üste sözdizimini kullandı, bu nedenle bunları bazen kodlarda veya örneklerde görebilirsin. Modern tarayıcılar, geriye dönük uyumluluk için ilk zamanlarda çıkan söz dizimlerini tek veya çift üstü üste nokta ile desteklemeye devam ederler.

Örneğin, bir paragrafın ilk satırını seçmek istiyorsan, onu bir <span>  öğesine sarabilir ve ona bir CSS kuralı uygulayabilirsin; ancak, sarmaladığın kelime sayısı ana öğenin genişliğinden daha uzun veya daha kısa olsaydı bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilemediğimiz için — ekran genişliği veya yazı tipi boyutu değişirse içeriğin şeklide değişecektir — bunu HTML öğesi ekleyerek sağlam bir şekilde yapmak imkansızdır.

::first-line Sözde öğesi güvenilir bir şekilde bunu sizin için yapacaktır — kelimelerin sayısının çoğalıp/azalması, ekranın genişleyip/daralması veya yazı tipinin ve boyutunun değişmesi bunu etkilemeyecek halen ilk satırı seçmeye devam edecektir.

Sanki bir <span>, ilk biçimlendirilmiş satırın etrafını sihirli bir şekilde sarmış ve satır uzunluğu her değiştiğinde kendini güncelleştiriyormuş gibi davranır.

Bu örnekte her iki paragrafın da ilk satırını seçtiğini görebilirsin.

Sözde sınıfları ve sözde öğeleri birleştirmek

İlk paragrafın ilk satırını kalın yapmak istersen, :first-child ve ::first-line seçicileri birbirine zincirleyebilirsin. Aşağıdaki CSS'i kullanması için önceki canlı örneği düzenlemeyi deneyin. Bir <article> öğesi içinde bulunan ilk öğenin<p> 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şturmak

CSS kullanarak belgene içerik eklemek için kullanılan bir kaç özel sözde öğe vardır: content.

Aşağıdaki canlı örnekte olduğu gibi bir metin dizisi eklemek için bunları kullanabilirsin. content özelliğinin metin dizesini değiştirmeyi dene ve çıktıdaki değişimi gözlemle. Ayrıca ::before sözde öğesini ::after olarak değiştir ve öğenin başına eklenen metnin ne tür bir değişim geçirdiğini gözlemle.

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 tarafından erişilemez ve gerektiğinde bu metinleri birilerinin bulması ve düzenlemesi zor olabilir.

Bu sözde öğelerin daha geçerli bir kullanımı, bir simge eklemektir, örneğin aşağıdaki örnekte eklenen küçük ok, bir ekran okuyucusu tarafından okunmasını istemediğimiz gösterimdir:

Bu sözde öpeler, aynı zamanda sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklılkla kullanılır.

Bu sonraki örnekte, ::before sözde öğesini kullanarak boş bir dizge ekledim. Bu boş dizeyi genişlik ve yükseklikle biçimlendirebilmem için bunu display: block olarak ayarladım. Artık CSS kullanarak onu normal bir öğe gibi şekillendirebiliyorum. Tanımlar üzerinde oynayarak görünüşünü ve davranışını değiştirebilirsin.

Özellik ile birlikte ::before ve ::after sözde öğelerin kullanımı, CSS'de "Oluşturulan İçerik" olarak adlandırılır ve bu tekniği çeşitli görevler için kullanıldığını sıklıkla görürsün. CSS Arrow Please, CSS ile bir ok oluşturmamızı sağlayan harika bir sitedir. Okunu oluştururken CSS'e incele, ::before ve cssxref("::after")}} sözde öğelerinin kullanıldığını göreceksin. Bu seçicileri her gördüğünde, belgeye neyin eklendiğini görmek için content özelliğine bak.

Referans bölümü

Çok sayıda sözde sınıf ve sözde öğe vardır ve başvurlaracak bir listeye sahip olmak yararlıdır. Aşağıda, MDN'deki referans sayfalarına bağlantılarla birlikte listeleyen bir tablo bulunmakta. Bunu, hedeflemen için mevcut olan seçenekleri görmek için bir referans olarak kullanman takıldığın noktalarda faydalı olacaktır.

Sözde sınıflar

Seçici Açıklama
:active Kullanıcının tarafından etkinleştirilen öğeyi seçecektir. Bu kullanıcının bir butona tıklaması/etkinleştirmesi ile bu eylemi bırakması arasında gerçekleşir.
:any-link Bağlantının herhangi bir durumuyla eşleşir :link ve :visited her iki bağlantı durumunun ikisiylede eşleşir.
:blank herhangi kullanıcı girişi olmayan  <input> öğesiyle eşleşir.
:checked Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.
:current O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.
:default Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.
:dir Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML dir niteliğinin değerine veya CSS direction özelliğindeki değere göre).
:disabled Devre dışı bırakılmış kullanıcı arabirimi öğeleriyle eşleşir. Herhangi bir şekilde etkileşime girilemez sadece varsayılan olarak görünebilir.
:empty Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.
:enabled Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.
:first Basılı Medya, içerisindeki ilk sayfayla eşleşir.
:first-child Kardeşler arasında birinci olan öğeyle eşleşir
:first-of-type Türdeş kardeşler arasındaki ilk öğeyi seçer.
:focus Odaklanmış bir öğeyle eşleşir.
:focus-visible Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.
:focus-within Odaklanılabilen bir çocuğu olan öğeyle eşleşir.
:future Geçerli öğeden sonraki öğe ile eşleşir.
:hover Kullanıcının üzerine geldiği öğe ile eşleşir.
:indeterminate Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle checkboxes.
:in-range Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.
:invalid Geçersiz bir değer girilmiş olan <input> öğesiyle eşleşir.
:lang Dil tanımı olan bir öğe ile eşleşir (HTML'nin lang niteliğindeki değerleri baz alır).
:last-child Kardeşler arasındaki en son öğe ile eşleşir.
:last-of-type Türdeş kardeşler arasındaki en son öğe ile eşleşir.
:left Basılı Medya, içersindeki soldaki sayfalarla eşleşir.
:link Ziyaret edilmeyen bağlantılar ile eşleşir.
:local-link Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.
:is() Seçicide belirtilen seçilerden herhangi biriyle eşleşir.
:not Bağımsız deşişken tarafından temsil edilmeyen öğe/öğeler ile eşleşir.
:nth-child Kardeş listesindeki öğeler ile eşleşir — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)
:nth-of-type Türdeş kardeş listesindeki öğeler ile eşleşir. — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)
:nth-last-child Kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)
:nth-last-of-type Türdeş kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1:  2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)
:only-child Kardeşi olmayan bir öğeyle eşleşir.
:only-of-type Türdeş kardeşi olmayan bir öğeyle eşleşir.
:optional Örnek girişlerin gösterildiği öğeler ile eşleşir.
:out-of-range Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.
:past Geçerli öğeden önceki öğelerle eşleşir.
:placeholder-shown Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.
:playing Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..
:paused Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.
:read-only Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.
:read-write Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.
:required Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.
:right Basılı Medya, sağ sayfalarla eşleşir.
:root Belgenin kök öğesiyle eşleşir.
:scope scope öğesi olan herhangi öğeyle eşleşir.
:valid Geçerli bir değer girilmiş <input> öğesiyle eşleşir.
:target Geçerli bir URL'yi hedefleyen öğeyle eşleşir.
:visited Daha önceden ziyaret edilmiş bağlantılarla öşleşir.

Sözde öğeler

Seçici Açıklama
::after Kaynak öğenin gerçek içeriğinden sonra görünen biçimlendirilebilir bir öğeyle eşleşir.
::before Kaynak öğenin gerçek içeriğinden önce görünen biçimlendirilebilir bir öğeyle eşleşir.
::first-letter Öğe içeriğinin ilk harfiyle eşleşir.
::first-line Öğe içeriğinin ilk satırıyla eşleşir.
::grammar-error HTML sayfasında tarafıyıcı tarafından işaretlenen bir gramer hatasıyla eşleşir .
::marker Genellikle bir madde işareti veya numara içeren bir liste öğesinin işaret kutusuyla eşleşir.
::selection Belgenin seçilen kısmıyla eşleşir.
::spelling-error HTML sayfasında tarayıcı tarafından işaretlenen yazım hatasıyla eşleşir.

Bu kısımda