CSS :not() Seçicisi ile Hariç Tutma Sanatı

CSS, web sayfalarımıza görsel kimlik kazandıran güçlü bir stil dilidir. Genellikle, belirli bir grup öğeye aynı stili uygulamak isteriz; örneğin, bir listedeki tüm öğelere veya belirli bir sınıfa sahip tüm elementlere. Ancak, bazen bu gruplardan bir veya daha fazla öğeyi hariç tutmak ve onlara farklı bir stil uygulamak gerekebilir. Bu tür senaryolar, geleneksel seçicilerle karmaşık veya tekrarlayan CSS kurallarına yol açabilir. İşte bu noktada, CSS’in güçlü bir yeteneği olan :not() sözde sınıfı devreye girer. :not() pseudo-class’ı, belirli bir kritere uyan öğeler dışındaki tüm öğeleri hedefleyerek seçici hassasiyetini dramatik bir şekilde artırmamızı sağlar. Bu makalede, :not() kullanımını derinlemesine inceleyecek ve “son öğe hariç tüm listeye alt çizgi ekle” gibi yaygın bir senaryoyu nasıl kolayca çözebileceğimizi kod örnekleriyle göstereceğiz.

The :not() pseudo-class’a genel bakış

:not() pseudo-class’ı, CSS seçicilerinde bir “olumsuzlama” veya “hariç tutma” mekanizması sunar. Temel olarak, argüman olarak verilen başka bir seçiciyle eşleşmeyen tüm öğeleri seçer. Sözdizimi oldukça basittir: selector:not(exception_selector). Burada selector, başlangıçta hedeflemek istediğimiz öğe grubunu tanımlarken, exception_selector ise bu gruptan hariç tutulacak öğelerin kriterlerini belirtir. Örneğin, div:not(.header) seçicisi, .header sınıfına sahip olmayan tüm <div> öğelerini seçecektir. Bu sözde sınıf, tek bir etiket adı, bir sınıf (.my-class), bir kimlik (#my-id), bir öznitelik seçici ([type="text"]) veya hatta diğer bazı sözde sınıflar (:first-child, :nth-child()) gibi çeşitli basit seçicileri argüman olarak alabilir. Bu esneklik, geliştiricilere çok daha rafine ve hedefe yönelik stil kuralları yazma imkanı sunar.

Seçici hassasiyetini artırma

:not() kullanımı, özellikle büyük ve karmaşık stil sayfalarında seçici hassasiyetini artırmanın anahtarıdır. Genellikle, bir grup öğeyi biçimlendirip sonra belirli bir öğenin stilini geçersiz kılmak için ayrı bir kural yazarız. Bu yaklaşım, CSS’in özgüllük kuralları nedeniyle bazen beklenmedik sonuçlara yol açabilir veya daha yüksek özgüllüğe sahip (veya !important içeren) başka kurallar gerektirebilir. :not() kullanarak, baştan itibaren yalnızca istediğimiz öğeleri hedefleyebilir ve hariç tutmak istediğimiz öğelere gereksiz stiller uygulamaktan kaçınabiliriz. Bu, daha temiz, daha verimli ve daha kolay bakımı yapılabilen CSS koduna yol açar. Örneğin, bir liste içindeki tüm öğelere bir kenarlık vermek isteyip, yalnızca son öğeye kenarlık vermemek, :not() olmadan iki ayrı kural gerektirebilirken, onunla tek bir kuralda bu başarıyla gerçekleştirilebilir.

Pratik bir örnek: son öğe hariç tüm listeye alt çizgi ekle

Şimdi, :not() pseudo-class’ının gücünü pratik bir örnekle görelim. Diyelim ki bir HTML listemiz var ve son öğe hariç tüm liste öğelerine (<li>) bir alt çizgi eklemek istiyoruz. Geleneksel yöntemle önce tüm öğelere alt çizgi verip, sonra son öğeden alt çizgiyi kaldırmak gerekecektir. Ancak :not() ile bu işlem tek bir CSS kuralıyla yapılabilir.

İşte örnek HTML yapısı:

Ve işte bu senaryoyu çözen CSS kodu:

Bu CSS kuralı, .my-list sınıfına sahip bir <ul> içindeki tüm <li> öğelerini hedefler, ancak :not(:last-child) kısmı sayesinde, bu <li> öğelerinden :last-child (yani sonuncu çocuk öğe) olanı hariç tutar. Böylece, sadece sonuncu olmayan <li> öğelerine text-decoration: underline; stili uygulanır. Bu yaklaşım, kod tekrarını önler ve seçicilerin niyetini çok daha açık bir şekilde ifade eder.

Yukarıdaki kuralların uygulanmış hali:

• İlk liste öğesi
• İkinci liste öğesi
• Üçüncü liste öğesi
• Dördüncü liste öğesi (bu alt çizgisiz ve kalın olacak)

Sınırlamalar ve en iyi uygulamalar

:not() pseudo-class’ı oldukça güçlü olsa da, bazı sınırlamalara ve dikkat edilmesi gereken noktalara sahiptir. Öncelikle, CSS Selectors Level 3’e göre :not()‘un argümanı olarak sadece basit bir seçici kabul edilir (örneğin, bir etiket adı, sınıf, ID veya başka bir sözde sınıf). Daha karmaşık bir seçici listesi (div:not(p > span) gibi) genellikle desteklenmez veya tarayıcı uyumluluğu sorunlarına yol açabilir, ancak CSS Selectors Level 4 ile bu sınırlama gevşetilmiştir ve artık virgülle ayrılmış bir seçici listesi de kullanılabilir. Bu nedenle, geniş tarayıcı uyumluluğu için argümanı basit tutmak en iyisidir. İkinci olarak, :not() kendisi özgüllüğe katkıda bulunmaz; ancak parantez içindeki seçicinin özgüllüğü, tüm seçicinin özgüllüğünü etkiler. Bu, diğer CSS kurallarıyla çakışmaların nasıl çözüldüğünü anlamak için önemlidir.

En iyi uygulamalar açısından, :not()‘u seçiciyi gereksiz yere karmaşıklaştırmadan mevcut seçimleri iyileştirmek için kullanmalıyız. Çok fazla :not() zinciri veya karmaşık argümanlar, CSS’i okumayı ve bakımını yapmayı zorlaştırabilir. Mümkün oldukça, mantığı basit ve anlaşılır tutmaya çalışın. Aynı zamanda, :not(*) kullanmaktan kaçınmalıyız çünkü bu herhangi bir öğeyi seçmeyecektir (her öğe bir yıldız seçiciyle eşleşir).

Özetle, CSS’in :not() pseudo-class’ı, web geliştiricilerine seçicilerini inanılmaz derecede hassas bir şekilde tanımlama gücü veren paha biçilmez bir araçtır. Belirli bir grup içindeki öğeleri hariç tutma yeteneği sayesinde, daha az kodla daha temiz, daha sürdürülebilir ve daha okunabilir stil sayfaları oluşturabiliriz. Geleneksel yaklaşımların birden fazla kural yazmayı veya stil sıfırlamayı gerektirebileceği durumlarda, :not() tek bir, zarif bir çözüm sunar. İster bir listedeki son öğeyi hariç tutmak, ister belirli bir sınıfa sahip düğmeleri stil dışı bırakmak olsun, :not() karmaşık senaryolar için basitleştirilmiş bir yol sağlar. Bu sözde sınıfı anlamak ve etkili bir şekilde kullanmak, modern ve duyarlı web arayüzleri geliştirirken CSS beceri setinizi önemli ölçüde zenginleştirecektir. Onunla çalışırken seçicilerinizin basitliğine dikkat ederek, gelecekteki bakım süreçlerini de kolaylaştırmış olursunuz.

“`

Resim Sahibi: Niki Nagy
https://www.pexels.com/@stuthnagyniki