CSS'de Sözde Öğeler ve Sözde Sınıflar

Web'imizde bir CSS stilini her değiştirmemiz gerektiğinde, Toni ve ben, görevi yapacak olan "şanslı adam"ın kim olduğunu görmek için taş-kağıt-makas oynuyoruz. Nasıl olur, sorabilirsiniz? Eh, uzun süredir HTML ve CSS ile çalışmak a** için bir sorun oldu, çünkü bir uçta bir şeyi düzeltmek başka yerlerde birçok şeyi bozdu.

Ancak gerçek şu ki, CSS son yıllarda çok değişti ve yeni işlevlerinden yararlanırsanız, web sitenizi düzgün ve etkili bir şekilde düzenlemek ve biçimlendirmek çok daha kolay. Benim düşünceme göre, son zamanlarda gördüğümüz CSS'deki büyük ilerlemelerden ikisi, ilk olarak flex (satırları ve sütunları düzenlemek için) ve biraz sonra grid (düzen ızgaralarına) dahil etmektir.

CSS, işinizi kolaylaştırabilecek özelliklerle doludur. Ve bugün bunlardan ikisini göreceğiz: sözde elemanlar ve sözde seçiciler.

CSS Pseudo-Elements ile “İçerik Oluşturma”

CSS sözde öğeleri , HTML'nin DOM'da ilişkilendirilmiş bir düğümü olmayan bölümlerine erişmek için bir mekanizmadır. Örneğin, "belgemizin bir parçası", "bir paragrafın ilk satırı", "bir paragrafın ilk harfi" veya "kullanıcı tarafından yapılan seçim" olabilir ve bunların hiçbirinin ilişkili bir düğümü yoktur. Ancak sözde öğeler, CSS aracılığıyla mevcut bir öğeden önce veya sonra içerik oluşturmanın bir yoludur.

CSS3'te bulunan sözde öğeler şunlardır:

• ::before : bir öğeden önce içerik ekler
• ::afte r: bir öğeden sonra içerik ekler
• ::first-letter : “block” öğesinin ilk harfini seçer (yani, display özelliği block , inline-block , table-cell vb. olarak ayarlanmış olanlar)
• ::first-line : bir "blok" öğesinin ilk satırını seçer
• ::selection : belgenin ziyaretçinin seçtiği kısımlarını ifade eder

Gördüğünüz gibi, sözde öğeler iki nokta üst üste ( :: ) ile başlayarak karakterize edilir. Ve onları bu şekilde kullanıyorsunuz.

Belgenin Bölümlerini Seçme

Örneğin, belirli bir paragrafın ilk satırının turuncu ve altı çizili olmasını istediğimizi varsayalım. Peki, sadece şöyle bir şey yapın:

 p::first-line { color: orange; text-decoration: underline; }

ve doğru sonucu alacaksınız:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum mollis leo turpis interdum'da, pharetra velit elementum'da. İsim eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque ve Massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Öte yandan, seçimi değiştirmek istiyorsanız, yaklaşım tamamen aynıdır. İnce ayar yapabileceğimiz CSS özelliklerinin sayısının color , background , cursor ve outline sınırlı olduğunu unutmayın:

 p::selection { background: #21acde; color: white; }

Bir şey seçtiğinizi varsayarak sonucu aşağıdaki paragrafta görebilirsiniz:

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum mollis leo turpis interdum'da, pharetra velit elementum'da. İsim eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque ve Massa congue, tincidunt erat ac, tincidunt elit. Sed ac dolor metus. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

Yeni İçerik Oluşturma

Ayrıca sayfanıza dinamik olarak içerik ekleme seçeneğiniz de vardır. Örneğin, şöyle bir öğe listeniz olduğunu hayal edin:

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

Listeler genellikle şöyle görünür:

• 1
• 2
• Üç

ancak, her öğenin bir mavi çubuk kullanılarak bir sonrakinden ayrılması için ince ayar yapabilirsiniz:

• 1
• 2
• Üç

::after sözde öğesini listedeki her öğede aşağıdaki gibi kullanarak:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

::before ve ::after sözde öğelerle birçok harika şey yapabilirsiniz. Örneğin, birden çok arka planı tek bir öğede birleştirebilir, sayfa yazdırıldığında bağlantıların URL'lerini görüntüleyebilir, kayan öğeleri sipariş edebilir, blokları etiketleyebilir, tipografinizi güzelleştirebilir vb.

Sözde Sınıfları Kullanarak Stilleri Daha Hassas Bir Şekilde Nasıl Uygulanır?

CSS sözde sınıfları, web sitemizin belirli bir durumda olan veya onları ayıran bazı özel özelliklere sahip öğelerini seçmemize izin verir. En yaygın (ve en eski) örnek muhtemelen bağlantı sözde sınıflarıdır:

• a:link , daha önce ziyaret etmediğiniz bağlantılardır
• a:visited , daha önce ziyaret ettiğiniz herhangi bir bağlantıdır
• a:hover , üzerinde bulunduğunuz bağlantıdır
• a:focus , o anda odaklanılan bağlantıyla eşleşir (bu, üzerine gelinmeye benzer, ancak fare yerine klavyeyi kullanmaya benzer)
• a:active , şu anda tıkladığınız bağlantıyla eşleşir

CSS'de yaklaşık 60 sözde sınıf vardır. Bunların büyük çoğunluğu, öğeleri durumlarına göre filtrelemenize izin verir (örneğin, tahmin ettiğiniz gibi salt okunur öğeleri :read-only sözde sınıfını kullanarak seçebilirsiniz). Ancak bu kuralın bahsetmeye değer bazı ilginç “istisnaları” vardır.

Ancak bunu yapmadan önce, kısa bir not: sözde sınıfı bir sözde öğeden nasıl ayırt edebileceğinize dikkat edin çünkü birincisi tek bir iki nokta üst üste ( : ) ile başlarken ikincisi iki ( :: ) ile başlar.

"Alt" ve "of-type" Sözde Sınıfları Kullanarak Bir Öğenin Çocuklarını Seçme

Bir listenin öğelerini ayırmak için dikey bir çubuk eklediğimiz daha önce gördüğümüz örneği hatırlıyor musunuz? Pekala, yakından bakarsanız, belirlediğimiz kuralın pek işe yaramadığını göreceksiniz:

• 1
• 2
• Üç

çünkü son eleman, olmamasına rağmen dikey bir çubuk da içerir. Kaldırmak istersek, şöyle bir şey yapabiliriz:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

tam olarak hayal ettiğiniz gibi çalışır:

• 1
• 2
• Üç

Gördüğünüz gibi, yaptığımız tek şey :last-child sözde sınıfını kullanarak yeni bir kural eklemek, bu da ul listemizdeki son li öğesini seçmemize ve ona sahip olduğumuzda sözde öğesini gizlememize izin veriyor ::after display özelliği none olarak ayarlandı.

* -child ve * -of-type'ın Özel Özellikleri

*-child sözde sınıfının üç çeşidi vardır:

• :first-child bir öğenin ilk çocuğuyla eşleşir (hah!)
• :last-child aynısını yapar, ancak ikincisi ile
• :nth-child(i) , tahmin ettiniz, i . öğeyi seçer (yani, örneğin, :nth-child(2) ikinci çocukla eşleşir)

Öyleyse aşağıdaki CSS'ye bakalım ve düşünelim:

 li strong:first-child { color: orange; text-decoration: underline; }

ve aşağıdaki HTML pasajı:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

Sizce ne olacak? Prensipte, her üç durumda da ipsum kelimesi turuncu olacak ve altı çizili olacak, çünkü ipsum her li elementindeki ilk strong çocuk, değil mi? Bakalım:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

Yeterince yakın. Bunun neden olduğunu tahmin edebilir misiniz?

:first-child sözde sınıfı, bir öğenin ilk çocuğu için geçerlidir. İlk cümlede ipsum , ilk çocuk olan ilk strong etikettir. İkinci cümlede, ilk alt düğüm em ( Lorem kelimesiyle) ve ardından ipsum kelimesiyle strong bir etiket geliyor. Bu nedenle, bu güçlü etiket “ilk çocuk” değildir . Son olarak, üçüncü cümlede kuralımıza uyan iki etiket var: ipsum (ilk cümle gibi) ve sit . sit'in üst etiketinin ( em ) ilk çocuğu olan strong bir etiket olduğuna dikkat edin.

Peki ya her li öğesinin ilk strong etiketinin altını çizmek istersek? Pekala, farklı bir sözde sınıf kullanmalı ve yalnızca li öğesinin doğrudan çocukları olan öğeleri eşleştirdiğimizden emin olmalıyız:

 li > strong:first-of-type { color: orange; text-decoration: underline; }

hangi beklendiği gibi çalışır:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

Oldukça harika, ha? Yine, bu sözde sınıfın üç çeşidi vardır:

• x:first-of-type , türü x olan ilk kardeşle eşleşir
• x:last-of-type sonuncusu sonuncuyu seçer
• x:nth-of-type(i) , türü x olan i'nci kardeşle eşleşir

Zıtını :not ile seçme

Son olarak, bugün sizinle konuşmak istediğim sözde sınıf :not . :not , belirli bir özelliği karşılamayan öğelerle eşleşen sözde bir sınıftır. Örneğin, bir önceki örneğimize dönelim:

• 1
• 2
• Üç

Son elemanda görünen bar problemini çözmek için temel olarak (1) barı tüm li elemanlarına ekledik ve (2) son elemandaki kuralın üzerine yazıp onu gizledik:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

Ama bu pek uygun görünmüyor, değil mi? İlk tule ile aşırıya kaçıyoruz ve ardından son elemanda stillerimizi düzeltmemiz gerekiyor. Asıl istediğimiz, sonuncusu hariç tüm öğelere çubuğu eklemekti…

Bunu, sözde sınıfı :not not'u uygulayarak ve onu :last-child ile birleştirerek başarabiliriz:

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

stili, son öğe olmayan ( :not(:last-child) ) olmayan tüm li öğelerine uygulayan, hedefimizi mükemmel bir şekilde tanımlayan ve böylece sorunumuzu çözen:

• 1
• 2
• Üç

Özetle

CSS sözde öğeleri ve sözde sınıflar, web sitemizin farklı öğelerine erişirken çok hassas olmamızı sağlar. Onlarla, bakımını basitleştiren ve belirli durumlar için sürekli olarak genel kuralların üzerine yazma olasılığını ortadan kaldıran daha özlü ve özel CSS kuralları yazabiliriz.

Umarım bu gönderiyi beğenmişsinizdir ve beğendiyseniz lütfen arkadaşlarınızla paylaşın!

Unsplash'ta JFL tarafından öne çıkan görsel.