Child ve Descendant CSS Seçicileri, HTML'de arayüz tasarımı için kullanılan bir stil dilidir Child seçici, belirli bir elementin doğrudan çocuklarını hedefleyen CSS seçicilerinden biridir Diğer CSS seçicileriyle birlikte kullanıldığında stil yapmayı daha etkili hale getirir Child seçicisi, belirli bir elementin ilk, son ve belirli sıradaki çocuklarını hedefleyerek HTML sayfalarını daha iyi şekillendirmek için kullanılabilir Descendant seçici ise, bir elementin içindeki herhangi bir alt elementi hedefleyen seçicidir Kodlama becerilerini geliştirmek isteyenler için Child ve Descendant CSS Seçicileri vazgeçilmez araçlardır Örneklerle anlatmak gerekirse, bir elementin ilk ya da n'inci çocuğunu seçerek stil uygulayabilirsiniz
Bu makalede, Child ve Descendant CSS Seçicileri kavramları ayrıntılı şekilde açıklanmış ve örnekler ile desteklenmiştir Bu şekilde

CSS, HTML'de arayüz tasarımı için kullanılan bir stil dilidir. Bu dilde Child ve Descendant CSS Seçicileri belli elementleri seçmek için kullanılır.

Bu makalede Child ve Descendant CSS Seçicileri konseptleri hakkında ayrıntılı bilgi verilecek ve her bir seçici için örnekler sunulacaktır. Bu makale sayesinde seçicileri daha iyi anlayabilir ve bu konuyu uygulamada kullanabilirsiniz.

Child Seçici

Child seçicisi, belirli bir elementin sadece doğrudan çocuklarını hedefleyen CSS seçicilerinden biridir. Yani, nostaljik bir ağacı ele alalım. Ağacın gövdesi belirli bir element olarak kabul edilirken, dallar ise doğrudan çocuklar olarak kabul edilir. Bu nedenle, bir child seçici olarak kullanıldığında sadece dallar hedeflenecektir.

Child seçici, HTML ağacındaki bir elementin doğrudan altında bulunan bir elementi hedeflediğinde kullanışlıdır. Bu seçici, diğer CSS seçicileriyle bir arada kullanıldığında stil yapmayı çok daha etkili hale getirir. Çocuk seçicisi, belirli bir elementin ilk, son ve belirli sıradaki çocuklarını hedefleyerek HTML sayfalarını daha iyi şekillendirmek için kullanılabilir.

Child seçicisinin kullanımı, belirli bir çocuğu (ilk, son, n'inci) hedeflemek için oldukça faydalıdır. Bu seçici, ayrıca belirli bir elementin belirli bir alt öğesine stil vermek için de kullanılabilir. Child seçicisi, CSS kodlama becerilerini daha da geliştirmek isteyenler için vazgeçilmez bir araçtır.

Örnek 1: İlk Çocuk Seçimi

Child seçici, belirli bir elementin doğrudan çocuklarını hedeflemek için kullanılır. İlk çocuk seçimi, ':' işareti kullanılarak sağlanır. Örneğin, "p:first-child" kullanarak dokümandaki ilk paragraf elementini seçebiliriz.

Aşağıdaki kod örneği, ilk çocuk seçimini kullanarak ilk list öğesini vurgulamak için bir CSS kodu gösterir:

ul li:first-child {	background: #8AC007;	color: #fff;}

Oluşan çıktı, ilk list öğesinin arka planının yeşil (#8AC007) ve metnin beyaz (#fff) olmasını sağlar:

• İlk öğe
• İkinci öğe
• Üçüncü öğe

Alt Örnek 1: İlk Çocuk Seçimi Kodu

Bir HTML belgesindeki bir div elementinin ilk çocuğunu seçmek için belgenin stil bölümünde aşağıdaki kod parçası kullanılabilir:

div:first-child {  color: red;}

Bu kodda, "div" elementinin altındaki ilk çocuk elementi seçilir ve "color: red" stil özelliği uygulanır. Bu örnekte belirli bir elementin ilk çocuğunun seçimine odaklanılmıştır.

Alt Örnek 2: İlk Çocuk Seçimi Çıktısı

İlk çocuk seçimi yaptığımızda, sadece belirtilen elementin ilk çocuğu seçilir. Yani, örnek kod parçasında olduğu gibi ul etiketinin ilk çocuğu olan li etiketi seçilir. Oluşan çıktı şu şekildedir:

<ul>  <li>Birinci Eleman</li>  <li>İkinci Eleman</li>  <li>Üçüncü Eleman</li></ul>

Gördüğünüz gibi, sadece ilk li etiketi seçildi. Böylece Child seçici ile istediğimiz belirli bir çocuk elementini seçebiliriz.

Örnek 2: N'inci Çocuk Seçimi

N'inci çocuk seçici, belirli bir elementin doğrudan çocuklarından, belirli bir sıraya sahip olanı hedeflemek için kullanılır. Örneğin, Belgelerimiz adlı bir div elementinin 3. çocuğuna stili uygulamak istiyorsak, bu seçiciyi kullanabiliriz.

Bu örnekte, div:nth-child(3) seçici Belgelerimiz adlı div elementinin doğrudan 3. çocuğunu hedefler. :nth-child() belirtilen numaralı çocuğu hedefler ve stil uygulamamızı sağlar. Belirtilen örnekte, belgenin üçüncü çocuğu kırmızı renkte olacaktır.

Alt Örnek 1: N'inci Çocuk Seçimi Kodu

Child CSS seçicileri hakkında örneklerimize devam ediyoruz. Bu bölümde, N'inci çocuk seçimi konusunu ele alacağız ve ilgili kod parçasını aşağıda sunacağız:

Bu kod parçasının anlamı, ana gövdedeki belirtilen çocuk elementlerden belirtilen N'inci çocuğu hedeflemektedir. Örneğin, eğer N=3 ise, kod parçası içinde 3. çocuk hedeflenecektir.

Kod parçası ise aşağıdaki gibidir:

ana-govde :nth-child(N) {  özellik: değer;}

Burada, N kısmı istenilen çocuk sayısı ile değiştirilmelidir. Özellik ve değer kısımları ise font boyutu, renk veya arka plan rengi gibi stil özelliklerini içermektedir.

Bu örneği kullanarak N değerini istenilen sayı ile değiştirerek kod parçasını deneyebilirsiniz.

Alt Örnek 2: N'inci Çocuk Seçimi Çıktısı

Child ve Descendant CSS Seçicileri konusunda örnekler sunmaya devam ediyoruz. Bu bölümde N'inci çocuk seçicisi örneğinin çıktısını gösteriyoruz. Öncelikle, önceki bölümde p:first-child seçicisini kullandık ve ilk p elemanını seçtik. Şimdi, aynı prensibi kullanarak kodu şu şekilde güncelleyebiliriz:

div p:nth-child(3) {  color: red;}

Bu kod bloğu, div elementinin 3. çocuğu olan p elemanını seçer ve metin rengini kırmızıya ayarlar. Aşağıdaki tabloda oluşan çıktıyı görebilirsiniz:

Yukarıdaki tablo, div elementinin 3. çocuğu olan p elemanının rengi kırmızı olarak ayarlandığını gösterir. Bu örnekte, :nth-child() seçicisi belirli bir sıraya göre eleman kaydırmanıza olanak tanır.

Örnek 3: Son Çocuk Seçimi

Child seçici ile son çocuğu seçmek için :last-child kullanılır ve bu seçici sadece son çocuğu hedef alır. Örneğin, aşağıdaki kod parçası son çocuğu seçmek için kullanılabilir:

Bu kod, tüm p elementlerinin son çocuğunu seçecek ve rengini kırmızı olarak ayarlayacaktır. Örneğin, aşağıdaki HTML kodu:

  <div>    <p>Bu birinci paragraf.</p>    <p>Bu ikinci paragraf.</p>    <ul>      <li>Liste öğesi 1</li>      <li>Liste öğesi 2</li>      <li>Liste öğesi 3</li>    </ul>  </div>

şu şekilde görüntülenecektir:

• Bu birinci paragraf.
• Bu ikinci paragraf.
• Liste öğesi 1
• Liste öğesi 2
• Liste öğesi 3

Bu kod parçası son çocuk seçiminde çok kullanışlıdır çünkü HTML'in esnek doğası nedeniyle son çocuk genellikle farklı öğeler olabilir. Bu nedenle, :last-child kullanarak son çocuğu seçmek, kodunuzun daha yönetilebilir ve esnek kalmasını sağlayacaktır.

Alt Örnek 1: Son Çocuk Seçimi Kodu

Child seçicinin son örneği olan son çocuk seçimi kodunu inceleyelim. Bu seçici, belirtilen elementin son çocuğunu seçmek için kullanılır. Örnek kod aşağıda verilmiştir:

                ul li:last-child {                    color: green;                }            

Bu kod, <ul> elementinin son <li> elementindeki metni yeşil renge dönüştürecektir.

Örneğin, aşağıdaki kod bloğuna bakalım:

                <ul>                    <li>İlk öğe</li>                    <li>Orta öğe</li>                    <li>Son öğe</li>                </ul>            

Eğer son çocuk seçicinin yerine :last-of-type kullanırsak, aynı çıktı elde edilir; ancak kod farklı görünür:

                ul li:last-of-type {                    color: green;                }            

Bu örnekle birlikte child seçicileriyle ilgili tüm örnekleri incelemiş olduk. Şimdi descendant seçicilere geçebiliriz.

Alt Örnek 2: Son Çocuk Seçimi Çıktısı

Son çocuk seçicisi, belirlenen elementin son çocuğunu hedefler. Örneğin, bir web sayfasında bir liste oluşturulacak ve listeye son eklenen öğe farklı özelliklere sahip olacak. Bu durumda son çocuk seçicisi kullanılabilir.

Son çocuk seçicisi, CSS kodlarını optimize etmek için oldukça yararlıdır ve web sayfalarının görselliğinde küçük ama önemli değişiklikler yapmak için kullanılabilir.

Descendant Seçici

Descendant seçici, belirli bir elementin altındaki elementleri hedefleyerek, CSS stil sayfalarının belirli bir HTML yapısındaki herhangi bir elementi özelleştirmesine olanak tanır. Descendant seçici, bir önceki elementin altında bulunan tüm elementleri hedef aldığından, seçicinin kullanımı sorunlu olabilir ve aşırı kullanım, sayfanın yavaş açılmasına neden olabilir.

Örneğin,