Altın Konu Web Geliştirme CSS Kombinatörleri

Nizam-ı Alem · 26 Kas 2025

CSS birleştiricileri, iki seçici arasındaki ilişkiyi tanımlar. CSS seçicileri, stil oluşturmak için öğeleri seçmek üzere kullanılan kalıplardır.

Bir CSS seçicisi, birleştiriciler kullanılarak birbirine bağlanan birden fazla seçiciden oluşan basit veya karmaşık olabilir.
Bu birleştiricileri anlamak, CSS'de hassas ve etkili stil oluşturmak için çok önemlidir.

CSS Kombinatörlerinin Türleri

1. General Sibling selector(~) (Genel Kardeş seçici)

Genel kardeş seçici, belirtilen bir öğeyi takip eden ve aynı üst öğeyi paylaşan öğeleri seçer. Bu, aynı üst öğeye sahip öğe gruplarını seçmek için yararlı olabilir.

[CODE lang="html" title="html"]<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div + p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
p {
text-align:center;
}
</style>
</head>

<body>
<div>Adjacent sibling selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>

</html>[/CODE]

2. Adjacent Sibling selector(+) (Bitişik Kardeş Seçici)

Bitişik kardeş seçici, belirtilen öğenin hemen yanındaki öğeyi seçer. Bu seçici yalnızca bir sonraki kardeş öğeyi seçer.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
    <style>
        div + p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>Adjacent sibling selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
 
</html>

3. Child Selector(>) (Çocuk Seçici)

Çocuk seçici, belirtilen bir öğenin doğrudan alt öğelerini seçer. Bu birleştirici, yalnızca doğrudan alt öğeleri seçtiği için alt öğe seçicisinden daha katıdır.

HTML:

<!DOCTYPE html>
<html>
 
<head>
    <title>Combinator Property</title>
    <style>
        div > p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>Child selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
 
</html>

4. Descendant selector(space) (Soy ağacı seçici)

Alt öğe seçici, belirtilen bir öğenin alt öğeleri olan tüm öğeleri seçer. Bu öğeler, belirtilen öğenin herhangi bir düzeyinde olabilir.

HTML:

<!DOCTYPE html>
<html>
 
<head>
    <title>Combinator Property</title>
    <style>
        div p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    </style>
</head>

<body>
    <div>Descendant selector property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
        <p>Descendant selector</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
 
</html>

CSS birleştiricilerini anlamak ve etkili bir şekilde kullanmak, web sayfalarını hassas bir şekilde biçimlendirme becerinizi büyük ölçüde geliştirebilir.
Her birleştirici benzersiz bir amaca hizmet eder ve HTML yapısındaki ilişkilerine göre öğeleri hedeflemek için kullanılabilir.
Bu birleştiricilerde ustalaşmak, karmaşık ve iyi yapılandırılmış stil sayfaları oluşturmak isteyen her web geliştiricisi için olmazsa olmazdır.