CSS Birleştiricileri (CSS Combinators)

Bu yazımızda, CSS’de sıklıkla karşımıza çıkan “Birleştiriciler” (Combinators) konusunu ele alıyoruz. CSS birleştiricileri, HTML etiketlerinin birbiriyle olan ilişkisini belirleyerek CSS stillemelerinin hangi elementlere ve nasıl uygulanacağını tanımlar. Bu önemli konsepti anlamak, web tasarımında daha esnek ve etkin stillemeler yapabilmenizi sağlar.

CSS Birleştiricileri

CSS birleştiricileri, adından da anlaşılacağı üzere, HTML elementlerini birleştirme işlevi görür. Ancak buradaki birleştirme, sadece iki etiketi yan yana koymak değil; belirli bir hiyerarşi veya ilişki içerisinde CSS stillemelerini uygulamak için bu etiketleri bir araya getirmektir. Bunu yapabilmek için CSS’de dört farklı birleştirici bulunmaktadır. Bunlar açıklamalarıyla beraber sırasıyla aşağıdaki tabloda derlenmiştir:

Seçki Alanı	Simgesi	Anlamı
descendant	space	soy seçici
child	>	çocuk seçici
adjacent sibling	+	yakın kardeş seçici
general sibling	~	genel kardeş seçici

❗ CSS birleştiricileri seçici türüne bakmaksızın çalışır. Element, class, id veya pseudo-class gibi farklı seçici türleri arasındaki ilişkiyi tanımlamak için bu birleştiricileri kullanabilirsiniz.

❗ CSS’te birden fazla seçiciye aynı stil setini uygulamak için virgül (,) tercih edilir. Bu, hem kodunuzun daha düzenli olmasını sağlar hem de gereksiz kod tekrarını önler. ani, virgül ile ayrılmış birden fazla seçiciye tek bir stil tanımı yapabilirsiniz. Bu, kodun tekrarını önler ve CSS’nizi daha kısa ve anlaşılır tutmanıza yardımcı olur. Örneğin:

Örneğimizde kullandığımız CSS tanımı, h1, h2 ve h3 başlıklarının hepsine Arial fontunu uygular. Eğer bu şekilde bir tanımlama yapmasaydık, her bir başlık için ayrı ayrı stil tanımlamamız gerekecekti ve bu da gereksiz kod tekrarına yol açacaktı.

CSS Descendant Selector Kullanımı

CSS’de child selector (çocuk seçici) space tuşunu bir kere basıralarak, yani aralarında boşluk bırakılarak yapılır ve belirtilen elementin bütün çocuklarını ve torunlarını, yani soyundaki bütün elementleri seçer.

Diyelim ki aşağdaki gibi HTML dökümanımız var:

CSS kısmı içine yazılmış kod bize der ki; div elementinin çocuğu veya torunu fark etmeksizin soyundan gelen bütün p elementlerine ilgili stili uygula. Haliyle ana <div> etiketi içerisindeki tüm <p> etiketlerine yazdığımız stil uygulayacaktır.

Sonuçta, yukarıdaki HTML kodunda 3 adet <p> etiketi vardır ve hepsine “CSS applied” yazısı eklenmiştir. Yukarıdaki CSS kodu sayesinde bu 3 <p> etiketinin tümü kırmızı renkte (“red”) olacaktır. İster doğrudan ana <div> etiketi altında olsun, isterse bir <article> etiketi içerisinde bulunsun, tüm <p> etiketlerine stil uygulanır. Bu “descendant” seçicisinin etkisini göstermektedir.

Bu arada, diğer <div> etiketleri ve içerisindeki metinlere (“Not applied”) herhangi bir stil uygulanmaz çünkü CSS kodunda sadece <div> içerisindeki <p> etiketlerini stilledik. Yani tek cümleyle özetlersek eğer şunu diyebiliriz; “<div> içerisindeki bütün <p> etiketlerini stille.” Bakınız:

See the Pen CSS Descendant Selector by 1kodum (@1kodum) on CodePen.

CSS Child Selector Kullanımı

CSS child selector, belirli bir HTML elementinin doğrudan çocuklarını seçmek için kullanılır. “Doğrudan” kelimesi burada kritiktir, çünkü bu seçici yalnızca belirtilen elementin bir alt seviyesindeki çocuklarına uygulanır, daha derindeki soyundan gelenlere (torunlara, torunlarının çocuklarına vb.) uygulanmaz.

Child selector, > işareti ile yapılır ve belirtilen elementin sadece çocuklarını seçer. Diyelim ki, aşağdaki gibi HTML dökümanımız var ve ilgili CSS kodunu ekledik:

Yukarıdaki CSS dosyası içine yazılmış örnek bize der ki; div elementinin yalnızca çocuğu olan bütün p elementlerine ilgili CSS özelliklerini uygula.

Bu CSS kodunda div > p seçicisi, ana <div> elementinin doğrudan çocukları olan ve <p> etiketine sahip olan elementleri seçer. Yani, bu seçici yalnızca ana <div> içinde doğrudan bulunan <p> etiketlerini kapsar ve <article> etiketi içinde bulunan <p> etiketini kapsamaz. Bakınız:

See the Pen CSS Child Selector by 1kodum (@1kodum) on CodePen.

Ne Zaman “Child Selector” Tercih Edilmeli?

1. Yalnızca belirli bir elementin doğrudan çocuklarına stil uygulamak istediğinizde.
2. Soy seçicisi ( ) kullanarak uygulanan stillerin istenmeyen yerlere sıçramasını önlemek istediğinizde.
3. Kodunuzu daha anlaşılır ve yönetilebilir kılmak istediğinizde.
4. Performans avantajlarından yararlanmak istediğinizde. (CSS tarayıcı tarafından yukarıdan aşağıya okunur. Child Selector’ı kullanarak, tarayıcının belirli bir stilin uygulanabilirliğini kontrol etmesi gereken öğe sayısını sınırlayabilirsiniz. Haliyle büyük dokümanlarda performans avantajı sağlar.)

Child Selector, belirli senaryolarda oldukça faydalıdır, ancak her durumda kullanılması gereken bir seçici değildir. İhtiyaçlarınıza ve yapmak istediğiniz stillemelere bağlı olarak en uygun seçiciyi kullanmanızı tavsiye ederim.

CSS Adjacent Sibling Selector Kullanımı

CSS adjacent sibling selector, bir HTML elementinden hemen sonrasında gelen kardeş elementini (aynı seviyedeki) seçmek için kullanılır. (+) işareti ile gösterilen bu seçici, belirttiğiniz elementin doğrudan arkasında bulunan ilk kardeşi ile eşleşir, ardından gelen diğer kardeşlerle eşleşmez. Diyelim ki, aşağdaki gibi HTML dökümanımız ve CSS stilimiz var:

Yukarıdaki CSS dosyası içine yazılmış örnek bize der ki; h2 elementleri ardından yine onun seviyesinde olan ilk p elementine ilgili CSS özelliklerini uygula. Haliyle CSS kodumuzda h2 + p seçicisi, bir <h2> etiketinden hemen sonrasında gelen <p> etiketini seçer. Bakınız:

See the Pen CSS Adjacent Sibling Selector by 1kodum (@1kodum) on CodePen.

Ne Zaman “Adjacent Sibling Selector” Tercih Edilmeli?

Maddeler halinde adjacent sibling selector yapısının en yaygın kullanıldığı durumları listelenmiştir:

1. Belirli bir sıralama ile gelen iki öğeye farklı stiller uygulamak istendiğinde.
2. Kodun daha anlaşılır ve okunabilir olmasını istediğinizde.
3. Belirli bir sıralamayı takip eden elementlere hızla stil uygulamak istendiğinde.
4. Yan yana düzenlenmiş öğeler arasında stil değişikliği yapmak istendiğinde.
5. İç içe geçmiş yapılarda sadece belirli bir öğeyi takip eden ilk kardeşi hedeflemek istediğinizde.

CSS General Sibling Selector Kullanımı

CSS general sibling aelector, ~ sembolü ile temsil edilir ve belirli bir öğeyi takip eden aynı seviyedeki tüm kardeş öğelere stil uygulamak için kullanılır. Adjacent sibling selector’den farklı olarak araya başka elementler girebilir. Diyelim ki, aşağdaki gibi HTML dökümanımız ve CSS stilimiz var:

Örneğinizdeki h2 ~ p seçicisi, herhangi bir h2 etiketini takip eden tüm p etiketlerine stil uygular. Bu durumda, ilk h2 etiketinden sonra gelen p etiketi ve sonraki h2 etiketinden sonra gelen p etiketine kırmızı renk uygulanacaktır. Ancak, bu stil sadece h2 ile aynı seviyede olan ve onu takip eden p etiketleri için geçerlidir. Eğer bir p etiketi, h2 etiketinin içerisinde ya da farklı bir hiyerarşide bulunmuş olsaydı bu stil uygulanmazdı. Bakınız:

See the Pen CSS General Sibling Selector by 1kodum (@1kodum) on CodePen.

Bu seçici, belirli bir öğeyi takip eden ve aynı hiyerarşide olan tüm kardeş öğelere belirli stiller uygulamak istediğinizde kullanışlıdır.

Ne Zaman “General Sibling Selector” Tercih Edilmeli?

1. Belirli bir elementten sonra gelen ve aynı hiyerarşide bulunan tüm belirli elementlere stil uygulamak istediğinizde.
2. Belirli bir başlangıç elementinden sonra gelen belirli tip elementlere genel bir stil uygulamak amacıyla.
3. Belirli bir elementin varlığına bağlı olarak sonraki elementlere koşullu stil uygulamak istediğinizde.
4. Belirli bir yapıdaki elementleri gruplandırarak, onlara genel bir stil uygulamak istediğinizde.
5. İç içe olmayan, aynı seviyedeki kardeş elementlere stil uygulamak istendiğinde.