CSS’de sahte elementler ve sahte sınıf

Birisi ön uç geliştirici tarafından yapılan işe hayran kalamaz ve hayran kalamaz.
Ancak gerçek şu ki, CSS son yıllarda çok değişti ve yeni işlevlerinden yararlanırsanız, web sitenizin düzenini ve stilini doğru ve etkili bir şekilde ayarlamak çok daha kolay olacaktır. Bence, yakın zamanda gördüğümüz CSS’deki iki büyük ilerleme, ilk olarak Flex (satır ve sütunların düzeni için) ve biraz sonra ızgara (ızgara düzeni için) dahil.
CSS, işinizi basitleştirebilecek özelliklerle doludur. Ve bugün bunlardan ikisini göreceğiz: sahte unsurlar ve sahte seçmen. CSS Pseudo Elements ile “İçerik Oluşturma” Semu CSS öğesi, DOM’da ilgili düğümlere sahip olmayan HTML bölümüne erişmek için bir mekanizmadır. Örneğin, “belgemizin bir kısmı” belki “paragrafların ilk satırı”, “paragrafın ilk mektubu” veya “kullanıcı tarafından yapılan seçenekler”, kimsenin ilgili düğümleri yoktur. Ancak sahte öğeler aynı zamanda CSS aracılığıyla mevcut öğelerden önce veya sonra içerik oluşturmanın bir yoludur.
CSS3’te bulunan sahte öğeler şunlardır:
:: Önceden: Elementten önce içerik ekleme
:: afte r: öğeden sonra içerik ekle
:: İlk harf: “blok” öğesinin ilk harfini seçme (yani, ekran özelliği blok, satır içi blok, masa hücresi vb. “blok” öğesi ”
:: Seçim: Ziyaretçiler tarafından seçilen belge bölümüne atıfta bulunarak
Gördüğünüz gibi, sahte öğe bir çift renkle başlar (: :). Ve bunu böyle kullanıyorsunuz. Örneğin, belgenin bir bölümünü seçmek, belirli paragrafların ilk turuncu ve altı çizili olmasını istiyoruz. Peki, sadece böyle yapın:
P :: Birinci Hat {Color: Turuncu; Metin dekorasyonu: alt hat; } Ve doğru sonuçları alacaksınız: lorem iPsum Dolor Sit amet, Kıvrımlı Seçkin Elite. Velit Elementum Phaaretra’da interdum Turpis’te vestibulum mollis leo. Lacus Sed Lacus Dictum Screenisque EGET’in adı. Proin porta ligula sed mi Semper, Auctors Interdum kütle Vel. Pellentesque ve Mass Congue, Tincidunt Close AC, Tincidunt Elite. Sed ac Dolor Metus. Nam Commodo Metus Sed Ligula Kavram İnterdum. Curabitur Odio EST, Tempor Id Egestas NEC, Nisl’de Aliquam. Tersine, seçimleri değiştirmek istiyorsanız, yaklaşım tamamen aynıdır. Değiştirebileceğimiz CSS özelliklerinin sayısının renk, arka plan, imleç ve taslak ile sınırlı olduğunu unutmayın:
P :: Seçim {arka plan: #21acde; Beyaz renk; } Sonuçları bir şey seçtiğiniz varsayılarak aşağıdaki paragrafta görebilirsiniz: Lorem Ipsum Dolor Sit Amet, Consitur Adipiscing Elite. Velit Elementum Phaaretra’da interdum Turpis’te vestibulum mollis leo. Lacus Sed Lacus Dictum Screenisque EGET’in adı. Proin porta ligula sed mi Semper, Auctors Interdum kütle Vel. Pellentesque ve Mass Congue, Tincidunt Close AC, Tincidunt Elite. Sed ac Dolor Metus. Nam Commodo Metus Sed Ligula Kavram İnterdum. Curabitur Odio EST, Tempor Id Egestas NEC, Nisl’de Aliquam. Yeni içeriğinizi oluşturmanın, sayfanıza dinamik içerik ekleme seçeneği de vardır. Örneğin, bunun gibi öğelerin bir listesi olduğunu düşünün:
Bir
İki
Üç
Genellikle, bu bir liste Görüntüle:
Bir
İki
Üç
Ancak, her elemanın mavi bir bıçak kullanarak bir sonraki öğeden ayrılacak şekilde değiştirebilirsiniz:
Bir
İki
Üç
Psödo Elements :: Listedeki her öğeden sonra aşağıdaki gibi: UL li {ekran: satır içi; } ul li :: sonra {color: #21acde; İçerik: “|”; Ekran: satır içi blok; } İle :: Önceden ve :: Pseudo elementlerinden sonra birçok harika şey yapabilirsiniz. Örneğin, birkaç arka planı bir öğede birleştirebilir, sayfa yazdırıldığında bir bağlantı URL’si görüntüleyebilir, yüzen öğeler sipariş edebilir, blokları etiketleme, tipografinizi güzelleştirebilirsiniz vb.
Pseudo sınıfı Pseudo CSS sınıfını kullanarak daha hassas bir stil nasıl uygulanır, belirli bir durumdaki web sitesi öğelerimizi seçmemizi veya bunları ayırt eden bazı özel özelliklere sahip olmamızı sağlar. En yaygın örnek (ve en eski) muhtemelen sahte sınıftır: A: A: Link Link, ziyaret etmediğiniz bir bağlantıdır
A: Ziyaret edilen ziyaret ettiğiniz bağlantıdır
A: Yönettiğiniz bağlantıya gelin
A: Odak, şu anda odaklanan bağlantıyla eşleşir (yüzmeye benzer, ancak fare yerine bir klavye kullanarak)
A: Aktif tıkladığınız bağlantıyla eşleşir
CSS’de yaklaşık 60 sahte sınıf vardır. Çoğu, durumlarına göre öğeler yapmanıza izin verir (örneğin, Salt okunur öğeyi kullanarak seçebilirsiniz, tahmin edebilirsiniz, sözde sınıf: salt okunur). Ancak bu kural için bahsedilmesi gereken bazı ilginç “istisnalar” vardır.
Ancak bunu yapmadan önce, sadece kısa bir yan kayıt: sözde sınıfları sözde öğelerden nasıl ayırt edebileceğinize dikkat edin, çünkü birincisi bir puanla başlar (:) Sonuncusu iki ile başlarken (:) :).
Liste öğelerini ayırmak için daha önce gördüğümüz örnekleri daha önce gördüğümüz örnekleri hatırlıyor musunuz? Eğer çok dikkat ederseniz, belirlediğimiz kuralların işlev görmesi için yeterli olmadığını göreceksiniz:
Bir
İki

Üç
Çünkü son eleman, olmasa da dikey bıçaklar da içerir. Eğer silmek istiyorsak, şöyle bir şey yapabiliriz:
ul Li {ekran: satır içi; } ul li :: sonra {color: #21acde; İçerik: “|”; Ekran: satır içi blok; } ul Li: Last-Child :: sonra {ekran: yok; } kim tam olarak hayal ettiğiniz gibi çalışıyor:
İki
Üç
Gördüğünüz gibi, yaptığımız tek şey sahte sınıfı kullanarak yeni kurallar eklemektir: son çocuk, UL listemizdeki son LI öğesini seçmemize izin veren ve aldıktan sonra pseudo element :: sonra Ekran özelliği hiçbirine ekran. Özel özellikler * -children ve * -type Üç sözde sınıf varyasyonu vardır * -child:
: İlk çocuk bir elementin ilk çocuğuna eşleşir (duh!)
: Last-cild de aynı şeyi yapar, ancak sonuncusu ile
: Nth-child (i), tahmin edebilir, ilk öğeyi seçebilirsiniz (örneğin,: nth-child (2) ikinci çocuğa eşleşir)
Öyleyse aşağıdaki CSS’yi görelim ve düşünelim:
Li Strong: İlk Çocuk {Color: Turuncu; Metin dekorasyonu: alt hat; } ve aşağıdaki HTML görüntüleri:
lorem iPSum Dolor sit amet.
lorem iPSUM Dolor Sit amet. Prensip olarak, her üç durumda da, iPSUM kelimesinin turuncu ve altı çizileceği anlaşılıyor, çünkü Ipsum Li’nin her unsurunda ilk güçlü çocuk, değil mi? Bakalım:
Lorem iPsum Dolor SAT amet.
Lorem iPsum Dolor SAT amet.
Lorem iPsum Dolor SAT amet.
Oldukça yakın. Bunun neden olduğunu tahmin edebilir misin? Sahte sınıf: İlk çocuk bir elementin ilk çocuğu için geçerlidir. İlk cümlede, iPSUM, ilk çocuk olan ilk güçlü etikettir. İkinci cümlede, ilk çocuğun düğümü EM’dir (Lorem kelimesi ile) ve daha sonra ipsum kelimesiyle güçlü bir etiket görünür. Bu nedenle, bu güçlü etiket “ilk çocuk” değildir. Son olarak, üçüncü cümlede kurallarımıza uygun iki etiket vardır: iPSUM (ilk cümle gibi) ve oturun. SIT’in, ana etiketinin (EM) ilk çocuğu olan güçlü bir etiket olduğuna dikkat edin. Peki, her Li öğesinden ilk güçlü etiketin altını çizmek istersek? Farklı sahte sınıf kullanmalıyız ve sadece Li’nin doğrudan türevleri olan elemanlarla eşleştiğimizden emin olmalıyız: li> Güçlü: Türün ilk {Color: Orange; Metin dekorasyonu: alt hat; } Beklendiği gibi işlev: lorem iPsum Dolor otur.
Lorem iPsum Dolor SAT amet.
Lorem iPsum Dolor SAT amet.
Yeterince inanılmaz, ha? Bir kez daha, bu sahte sınıfın üç varyasyonu var:
X: Tipin ilk örneği ilk kardeşi Tip X ile eşleştiriyor
X: Sonun sonunu seçer
X: nth-off tipi (i) tip x olan ilk kardeşle eşleşiyor
Bunun tersini seçmek: Son olarak, bugün sizinle konuşmak istediğim sahte sınıf: değil. : Belirli özellikleri karşılamayan öğelerle eşleşen sahte bir sınıf değildir. Örneğin, önceki örneğe dönelim:
Bir
İki
Üç
Son öğede görünen bıçakların probleminin üstesinden gelmek için, temel olarak (1) bıçakları Li’nin tüm öğelerine ekleriz ve (2) son öğedeki kuralları bulmak ve gizle: ul li {ekran: satır içi; } ul li :: sonra {color: #21acde; İçerik: “|”; Ekran: satır içi blok; } ul Li: Last-Child :: sonra {ekran: yok; } Ama bu çok optimal değil, değil mi? İlk tule ile aştığımız ve daha sonra son öğede tarzımızı geliştirmemiz gerekiyor. Gerçekten istediğimiz şey, sonuncusu dışındaki tüm öğelere bıçak eklemektir … Peki, sahte sınıfı uygulayarak başarabiliriz: değil ve birleştirerek: last-child: ul li {ekran: satır içi; } ul Li: NOT (: LAST-CHILD) :: sonra {color: #21acde; İçerik: “|”; Ekran: satır içi blok; stili son unsur olmayan tüm Li öğelerine uygulayan (: değil (: son çocuk)), hedeflerimizi mükemmel bir şekilde tanımlayan ve böylece sorunlarımızı çözen: bir tane
İki
Üç
Kısacası, sözde öğeler ve sözde sınıflar CSS, web sitemizin çeşitli öğelerine erişirken daha doğru olmamızı sağlar. Bununla birlikte, bakımlarını basitleştiren ve belirli durumlar için genel kuralları sürekli olarak etkileme olasılığından kaçınan daha özlü ve belirli CSS kuralları yazabiliriz. Umarım bu gönderiyi beğenirsiniz ve isterseniz lütfen arkadaşlarınızla paylaşın! JFL tarafından Üstün Görüntü Unplash.