CSS Komşu Kardeş Seçicisi

Yan yana kardeş seçici (Adjacent sibling selector), aynı ebeveyn elemente sahip olan bir elementin hemen ardından gelen bir elementini seçebilir.

Yan yana kardeş seçimi

Bir elementin hemen ardından gelen bir elementi seçmek ve her ikisinin de aynı ebeveyn elemente sahip olması gerekiyorsa, yan yana kardeş seçici (Adjacent sibling selector) kullanılabilir.

Örneğin, h1 elementinin hemen ardından gelen paragrafın üst kenar boşluğunu artırmak istiyorsanız, şu şekilde yazabilirsiniz:

h1 + p {margin-top:50px;}

Bu seçici şu şekilde okunur: 'h1 elementinin hemen ardından gelen paragrafı seçin, h1 ve p elementleri aynı ebeveyn elemente sahiptir.'

Kişisel olarak deneyin

Gramer açıklaması

Yan yana kardeş seçici, artı işareti (+) ile kullanılır, yani yan yana kardeş birleştiricisi (Adjacent sibling combinator).

Açıklama:Altı çizgi birleştiricisi gibi, yan yana kardeş birleştiricisi yanında boşluk işaretleri olabilir.

Aşağıdaki belge ağacını bakın:

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

Yukarıdaki parçada, div elementi iki liste içerir: bir sırasız liste ve bir numaralı liste, her iki liste de üç listeleme öğesi içerir. Bu iki liste komşu kardeşlerdir, listeleme öğeleri de komşu kardeşlerdir. Ancak, ilk listenin listeleme öğeleri ikinci listenin listeleme öğeleri ile komşu kardeşler değildir, çünkü bu iki grup listeleme öğesi aynı üst elemente sahip değildir (en fazla dayı kardeş olarak sayılabilir).

Bir birleşicisiyle sadece iki komşu kardeşten ikincisini seçebilirsiniz. Aşağıdaki seçiciyi göz önünde bulundurun:

li + li {font-weight:bold;}

Yukarıdaki seçici sadece listedeki ikinci ve üçüncü listeleme öğelerini kalın hale getirir. İlk listeleme öğesi etkilendirilmez.

Kişisel olarak deneyin

Diğer Seçicilerle Birleştirme

Komşu kardeş birleşicisi diğer birleşicilerle de birleştirilebilir:

html > body table + ul {margin-top:20px;}

Bu seçici, table elementinin ardından çıkan tüm kardeş ul elementlerini seçer, bu table elementi body elementi içinde yer alır ve body elementi html elementinin bir alt elementidir.