Birleştiriciler

İşleyeceğimiz son seçiciler birleştiricilerdir; birleştiriciler diğer seçicileri, birbirleriyle ve belgedeki içeriğin konumu ile yararlı bir ilişki sağlaycak şekilde birleştirirler.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: CSS'de kullanılabilecek farklı birleştirici seçiciler hakkında bilgi edinmek.

Soy(torun) birleştirici

Soy birleştiricisi — tipik olarak tek bir boşluk ( ) karakterinden oluşur — en az iki seçiciden oluşan (ata, eşleşen n. soy, n. eşleşenin soyundan gelen n+1. eşleşen soy). Birinci seçicinin eşleştiği öğenin soyunda ikinci seçicinin eşleştiği öğe ile eşleşir. torunt seçici hiyararşide kaçıncı basamakta olduğu önemli değildir. Bir alt öğede olabir, 2., 3., 4. veya daha alt seviyelerdeki bir öğede olabir. Örneğin; aşağıda body'nin soyundan gelen article'nin soyundaki p ile eşleşirlir. article body'nin 50. torunu olabilir, p'de article'nin 15. torunu olabilir burada dikkat edilecek durum p ile body arasında herhengi bir yerde article'nin olması gerekmektedir. Tabiki buradaki kavram yazacağın kurala göre değişecektir.

body article p

Aşağıdaki örnekte, sadece .box sınıfının içindeki <p> öğesini eşleştiriyoruz.

Çocuk birleştirici

Çocuk birleştirici, iki seçici arasına yerleştirilen büyüktür işaretidir (>). Yalnızça birinci seçiciyle eşleşen öğelerin doğrudan alt öğeleri içinde bulunan, ikinci seçiciyle eşleşen öğelerle eşleşir. Hiyerarşinin sonraki alt öğeleriyle bir eşleştirme gerçekleştirmez. Örneğin, <article> öğesinin doğrudan bir alt öğesi olan <p> öğesiyle eşleşen bir kural yazmak istersek:

article > p

Bir sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir liste var. Sadece <ul> öğe seçicimin doğrudan bir alt öğesi olan <li> öğesiyle eşleşen bir kural yazıp. Onlara üst sınır çizgisi tanımladım.

Buradaki <li> seçicinin çocuk olduğunu belirten > işaretini kaldırırsan, bir soy seçiciyle karşılaşırsın ve tüm öğeler kırmızı bir üst kenarlık alır.

Bitişik kardeş birleştirici

Bitişik kardeş seçici (+), hiyararşinin aynı seviyesindeki başka bir öğenin hemen yanındaki öğeyi seçmek için kullanılır. Örneğin, <p> öğesinden sonra gelen <img> öğesini seçmek için:

p + img

Yaygın bir kullanım örneği, aşağıda olduğu gibi, bir başlığı takip eden paragrafa bir şeyler yapmaktır. Burada doğrudan bir <h1> bitişiğinde olan bir paragraf arıyoruz ve onu şekillendirmek istiyoruz.

Eğer <h1> ve <p> arasına <h2> gibi başka bir seçici eklersen, paragrafın artık şekillenmediğini göreceksin.

 

Genel kardeş birleştirici

Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsan, genel kardeş birleştiriciyi (~) kullanabilirsin. <p> öğesinden sonra gelen tüm <img> öğelerini seçmek için şunu yapardık.

p ~ img

Aşağıdaki örnekte,  <h1> öğesinden sonra gelen <p>'yi seçip, daha sonra gelen <div>'i atlıyoruz ve bir sonra ki <p> öğesinide seçiyoruz.

Not: Genel kardeş seçici kendinden sonra gelen aynı hiyararşideki kardeşleriyle eşleşir. Kendinden önce gelen kardeşleriyle bir eşleşme sağlamaz.

Birleştiricileri kullanma

Belgenin bir bölümünü seçmek için önceki derslerde keşfettiğin seçicilerden herhangi birini birleştiricilerle birleştirebilirsin. Örneğin, <ul> doğrudan çocukları ve "a" sınıfına sahip liste öğelerini seçmek istesem, aşağıdaki kodu kullanabilirim.

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

ancak, belgenin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi biçimlendirmedeki öğenin konumuna özelleştirdiğin için CSS kurallarını farkılı bir yerde kullanman zor olacaktır.

Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte, belgendeki bir şeye ulaşman gerekiyorsa ve bir CMS tarafından oluşturulmuş olması hasebiyle HTML'ye erişemiyorsan, birleştiriciler hakkındaki bilgin çok yararlı olacaktır.

Beçerilerini test et!

Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testlere bakmak isteyebilirsin —  Becerilerini test et: Seçiciler.

Sıradaki

Bu, seçicilerle ilgili derslerimizin son bölümüdür. Bir sonraki derste CSS'in başka bir önemli kısmına geçeceğiz —  CSS Kutu Modeli.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme