Birleştiriciler

Bakacağımız son seçicilere birleştirici denir, çünkü bunlar diğer seçicileri birbirleriyle ve belgedeki içeriğin konumuyla yararlı bir ilişki sağlayacak şekilde birleştirirler.

Soy birleştirici

Soyundan birleştirici – tipik olarak tek bir boşluk karakteri ile kullanılırlar. Seçilen ikinci öğenin ata (üst, ebeveynin üst, ebeveynin ebeveynin üst, vs) öğesi birinci seçici ile eşleyiorsa, bu iki seçici birleştirilir. Bu şekilde ebeveyn ilişkisini kullanan seçicilere, soy seçicileri denir. Örneğin body öğesinin içindeki article öğesinin içindeki p öğesini seçelim:

body article p

Aşağıdaki örnekte yalnızca.box sınıfına sahip bir öğenin içindeki <p> öğesini seçiyoruz:

.box p {
    color: red;
}

<div class="box">
   <p>Text in .box</p>
</div>
<p>Text not in .box</p>

Çocuk birleştirici

Alt birleştirici (>) iki CSS seçicisi arasına yerleştirilir. Yalnızca, birinci seçicinin eşleştirdiği öğelerin doğrudan çocukları olan ikinci seçici tarafından eşleşen öğelerle eşleşir. Hiyerarşinin daha aşağısındaki alt öğeler eşleşmez. Örneğin, yalnızca <article> öğelerin doğrudan çocukları olan <p> öğelerini seçmek için aşağıdakini kullanırız:

article > p

Bu sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir listemiz var. Yalnızca <ul> öğesinin doğrudan çocuğu olan <li> öğeleri seçmek için alt birleştiriciyi kullanıyoruz. Bu öğelere bir de üst kenarlık veriyoruz.

Bunu bir alt birleştirici olarak atayan > öğesini kaldırırsanız, soy seçiciyle sonuçlanırsınız ve tüm <li> öğeleri kırmızı kenarlık alır.

ul > li {
    border-top: 5px solid red;
}

<ul>
    <li>Unordered item</li>
    <li>Unordered item
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ul>

Komşu kardeş birleştirici

Bitişik kardeş seçici (+) iki CSS seçicisi arasına yerleştirilir. Yalnızca, birinci seçicinin sonraki kardeş öğesi olan ikinci seçici tarafından eşleşen öğelerle eşleşir. Örneğin, bir <p> öğesinden hemen sonra gelen tüm <img> öğelerini seçelim:

p + img

Yaygın bir kullanım durumu, aşağıdaki örnekte olduğu gibi bir başlığı takip eden bir paragrafla bir şeyler yapmaktır. Bu örnekte, <h1> öğesini hemen takip eden herhangi bir paragraf arıyoruz.

Eğer <h1> ve <p> arasına <h2> gibi başka bir öğe eklerseniz paragraf artık seçici tarafından eşleştirilmez:

h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}

<article>
    <h1>A heading</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

Genel kardeş birleştirici

Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsanız, genel kardeş birleştiriciyi (~) kullanabilirsiniz. <p> öğesinden sonra gelen herhangi bir <img> öğesini seçmek için aşağıdakini yapardık:

p ~ img

Aşağıdaki örnekte , <h1>‘den sonra gelen tüm <p> öğeleri seçiyoruz. Sayfamızda <h1>‘den sonra gelen <div> olmasına rağmen bu öğeden sonraki <p> öğelerini de seçebiliyoruz.

h1 ~ p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}

<article>
    <h1>A heading</h1>
    <p>I am a paragraph.</p>
    <div>I am a div</div>
    <p>I am another paragraph.</p>
</article>

Birleştiricileri kullanma

Belgenizin bir bölümünü seçmek için önceki yazılarda keşfettiğimiz seçicilerden herhangi birini birleştiricilerle birleştirebilirsiniz. Örneğin, <ul> öğesinin doğrudan çocukları olan ve “a” sınıfına sahip liste öğelerini seçmek istiyorsak aşağıdakini kullanabiliriz.

ul > li[class="a"]  {  }

Ancak, belgenizin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi işaretlerken o öğenin konumuna göre özel bir seçim yaptığınız için CSS kurallarını sonrasında yeniden kullanmak zor olabilir.

Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte sayfanıza erişemiyorsanız, ya da bir CMS tarafından oluşturulduğundan dolayı HTML’ye erişemiyorsanız, birleştirici bilginiz çok yararlı olacaktır.

Becerilerinizi test edin!

Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizden emin olun.

Devam edelim

Bu yazı seçicilerle ilgili serimizin son bölümüydü. Şimdi CSS’nin başka bir önemli bölümüne geçeceğiz – CSS Kutu Modeli .

ders