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 (en-US) 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 (en-US) — 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 (en-US) 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 (en-US) ö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 (en-US) Bağlantının herhangi bir durumuyla eşleşir :link ve :visited her iki bağlantı durumunun ikisiylede eşleşir.
:blank (en-US) herhangi kullanıcı girişi olmayan  <input> öğesiyle (en-US) eşleşir.
:checked (en-US) Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.
:current (en-US) O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.
:default (en-US) Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.
:dir (en-US) Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML dir (en-US) niteliğinin değerine veya CSS direction (en-US) özelliğindeki değere göre).
:disabled (en-US) 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 (en-US) Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.
:enabled (en-US) Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.
:first (en-US) Basılı Medya (en-US), içerisindeki ilk sayfayla eşleşir.
:first-child (en-US) 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 (en-US) Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.
:focus-within (en-US) Odaklanılabilen bir çocuğu olan öğeyle eşleşir.
:future (en-US) Geçerli öğeden sonraki öğe ile eşleşir.
:hover (en-US) Kullanıcının üzerine geldiği öğe ile eşleşir.
:indeterminate (en-US) Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle checkboxes (en-US).
:in-range (en-US) Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.
:invalid (en-US) Geçersiz bir değer girilmiş olan <input> öğesiyle eşleşir.
:lang (en-US) Dil tanımı olan bir öğe ile eşleşir (HTML'nin lang (en-US) niteliğindeki değerleri baz alır).
:last-child Kardeşler arasındaki en son öğe ile eşleşir.
:last-of-type (en-US) Türdeş kardeşler arasındaki en son öğe ile eşleşir.
:left (en-US) Basılı Medya (en-US), içersindeki soldaki sayfalarla eşleşir.
:link Ziyaret edilmeyen bağlantılar ile eşleşir.
:local-link (en-US) Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.
:is() (en-US) 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 (en-US) 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 (en-US) 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 (en-US) 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 (en-US) 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 (en-US) Kardeşi olmayan bir öğeyle eşleşir.
:only-of-type (en-US) Türdeş kardeşi olmayan bir öğeyle eşleşir.
:optional (en-US) Örnek girişlerin gösterildiği öğeler ile eşleşir.
:out-of-range (en-US) Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.
:past (en-US) Geçerli öğeden önceki öğelerle eşleşir.
:placeholder-shown (en-US) Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.
:playing (en-US) Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..
:paused (en-US) Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.
:read-only (en-US) Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.
:read-write (en-US) Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.
:required (en-US) Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.
:right (en-US) Basılı Medya (en-US), sağ sayfalarla eşleşir.
:root Belgenin kök öğesiyle eşleşir.
:scope (en-US) scope öğesi olan herhangi öğeyle eşleşir.
:valid (en-US) Geçerli bir değer girilmiş <input> öğesiyle eşleşir.
:target (en-US) Geçerli bir URL'yi hedefleyen öğeyle eşleşir.
:visited (en-US) Daha önceden ziyaret edilmiş bağlantılarla öşleşir.

Sözde öğeler

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

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme