Birleştiriciler

Bacakacağımız 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.

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 bir 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ız, bir soy seçiciyle karşılaşırsınız 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 eklerseniz, paragrafın artık şekillenmediğini göreceksiniz.

 

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 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 gelen <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ştiricilerin kullanma

Belgenizin bir bölümünü seçmek için önceki derslerde keşfettiğiniz seçicilerden herhangi birini birleştiricilerle birleştirebilirsiniz. Ö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, belgenizin ç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ğiniz için CSS kurallarını farkılı bir yerde kullanmak zor olacaktır..

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

Beçerilerinizi test edin!

Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri kavradığınızı doğrulamak için bazı ek testlere bakmak isteyebilirsiniz —  Becerilerinizi test edin: 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 — the 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 elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme