CSS Descendant Seçici Nedir?

Bir HTML belgesinin yapısı bir aile ağacına benzer. Ailenizde, ailenizi ve senden önce gelenleri var. Bunlar atalarınız. Çocuklar ve o ağacın peşinden gelenler torunlarınızdır. HTML benzer bir şekilde çalışır. Diğer unsurların içinde bulunan unsurlar onların soyundan gelmektedir. Örneğin, neredeyse her HTML öğesi etiketlerinin içinde olduğu için, bu öğelerinin soyundan gelecektir. Bu ilişki, CSS ile çalışmaya başladığınızda ve görsel stiller uygulamak için belirli öğeleri hedeflemeniz gerektiğinde anlamak önemlidir.

CSS Descendant Seçiciler

Bir CSS soyundan gelen seçici, başka bir öğenin içindeki (veya daha doğru bir şekilde belirtilmiş olan, başka bir öğenin soyundan gelen öğesi olan) öğelere uygulanır. Örneğin, sırasız bir listede torun olarak etiketli bir etiket bulunur. Aşağıdaki HTML'yi örnek olarak kullanalım:

• bu bir bağlantıdır

  LI etiketleri UL etiketinin torunlarıdır. A etiketi, hem LI (alttan soylu) hem de UL (torun torunu) etiketlerinin bir soyundan gelmektedir. Bunu aile ağacı örneğini kullanarak düşünmeyi düşünürseniz, ebeveyni

  ebeveynin,
  • o elemanın çocuğu olurdu ve ,
  • nin çocuğu ve
    .

    Öyleyse, bir web sayfasındaki belirli unsurları bu soyundan gelen seçicileri kullanarak nasıl hedeflersiniz? Öncelikle, soyundan gelen seçicileri boşluklarla ayrılmış iki (veya daha fazla) tip seçiciyi kullanarak tanımlamanız gerekir.

    li a {text-decoration: none; }

    Bu örnekte, stiller yalnızca bir liste öğesi öğesinin (

    • ) soyundan gelen bir bağlantı öğesi () için geçerli olacaktır. Sayfadaki bir liste öğesinin soyu olmayan tüm diğer bağlantılar bu stili alamazdı.

      Unutulmaması gereken önemli bir nokta, soyundan gelen seçicinizde kullanabileceğiniz etiketler arasında kaç tane etiket bulunduğunun önemi olmamasıdır. Eğer ikinci eleman ilk elemanın içinde herhangi bir yerde bulunuyorsa, bir alt öğe olarak seçilecektir.

      Eğer ul öğelerinden gelen tüm çapaları seçmek isterseniz, şunu yazabilirsiniz:

      ul a {text-decoration: none; }

      Şimdi, bu stiller bir liste öğesinin soyundan gelen herhangi bir bağlantıya uygulanacaktır. Bu seçiciyi de yazabilirsin

      ul li a {text-decoration: none; }

      Bu, ikiden fazla tip seçici kullanan bir selektördür. Bu durumda, bu, liste öğesi olarak ve sıralanmamış bir listenin içinde bulunan bağlantılara uygulanır.

      Sınıf Seçicileri ve Kimlik Seçicilerini Kullanma

      Aşağı inen seçmenler her zaman tür torunları olmak zorunda değildir. Örneğin, "billboard" kimliğine sahip bir alanın (bir bölüm gibi) olduğunu hayal edin. Bu kimliğe bağlı bir selektör kurabilirsiniz:

      #billboard ul {background-color: #ccc; }

      Bu, "ilan panosu" kimliğine sahip bir öğenin soyundan gelen sıralanmamış listeyi biçimlendirir. Sınıf değerleri için de aynısını yapabilirsiniz.

      div.billboard ul {background-color: #ccc; }

      Bu, bölümün "billboard" sınıfı bir değere sahip olduğunu varsayar. Yukarıdaki CSS, bu sınıf değerine sahip olan herhangi bir bölümün içindeki

      öğesini biçimlendirir.

      Soyundan gelen seçmenler ile gerçekten ağır el ve verbose alabilirsiniz. Örneğin, HTML kodunuzu yazmak için Dreamweaver kullanıyorsanız, bu sayfada imlecinizin yerleşimini temel alarak seçiciyi otomatik olarak oluşturacak yeni CSS kuralları eklediğinizde bir ayar vardır. Dreamweaver'ın bu örneklerde yaptığı şey, çılgınca ve uzun vadeli bir selektör oluşturmasıdır. CSS'nizin çalışması için bu kadar özgüllük gerekli değildir. Yapmak istediğiniz şey, altta yatan seçicilere sahip CSS kurallarına sahip olmadan ihtiyacınız olan tam elemanlara (etkilemek istemediğiniz stilleri kullanmadan) inebileceğiniz özel bir selektör arasında bir denge bulmaktır. büyük.