ترکیب‌کننده‌ها (Combinators)

آشنایی با ترکیب‌کننده‌های CSS: نوادگی، فرزند، خواهر مجاور و خواهر عمومی

ترکیب‌کننده (Combinator) چیست؟

ترکیب‌کننده‌ها رابطه بین انتخابگرها را مشخص می‌کنند. با آن‌ها می‌توان عناصر را بر اساس رابطه با عناصر دیگر انتخاب کرد.

چهار نوع ترکیب‌کننده

نوعنمادتوضیح
نوادگی (Descendant)فاصله تمام فرزندان در هر عمقی
فرزند (Child)>فقط فرزندان مستقیم
خواهر مجاور (Adjacent)+فقط عنصر بلافاصله بعد
خواهر عمومی (General)~تمام عناصر بعد در همان والد

۱. انتخابگر نوادگی (Descendant)

با فاصله بین انتخابگرها — تمام فرزندان در هر عمقی:

/* تمام p‌های داخل div */
    div p {
        color: blue;
    }
    
    /* تمام a‌های داخل nav */
    nav a {
        text-decoration: none;
    }

۲. انتخابگر فرزند مستقیم (Child)

با علامت > — فقط فرزندان مستقیم:

/* فقط li‌های مستقیم ul */
    ul > li {
        list-style: none;
    }
    
    /* فقط p‌های مستقیم article */
    article > p {
        margin-bottom: 10px;
    }

۳. خواهر مجاور (Adjacent Sibling)

با علامت + — فقط اولین عنصر بعد:

/* فقط p‌ای که بلافاصله بعد h1 می‌آید */
    h1 + p {
        font-size: 1.2em;
        color: #666;
    }

۴. خواهر عمومی (General Sibling)

با علامت ~ — تمام عناصر بعد در همان سطح:

/* تمام p‌هایی که بعد h1 می‌آیند */
    h1 ~ p {
        color: #555;
    }

مثال کامل

<div class="container">
        <h1>عنوان</h1>
        <p>پاراگراف ۱</p>
        <p>پاراگراف ۲</p>
        <div>
            <p>پاراگراف تودرتو</p>
        </div>
    </div>
    
    /* نوادگی — هر ۴ پاراگراف */
    .container p { }
    
    /* فرزند مستقیم — فقط ۳ پاراگراف اول */
    .container > p { }
    
    /* مجاور — فقط پاراگراف ۱ */
    h1 + p { }
    
    /* خواهر عمومی — ۳ پاراگراف اول */
    h1 ~ p { }

ترکیب چند ترکیب‌کننده

/* nav > ul > li > a */
    nav > ul > li > a {
        color: blue;
    }
    
    /* .card h2 + p */
    .card h2 + p {
        font-size: 0.9em;
    }

اولویت (Specificity) ترکیب‌کننده‌ها

هرچه انتخابگر دقیق‌تر باشد، اولویت بیشتری دارد:

/* اولویت کم */
    p { }
    
    /* اولویت متوسط */
    div p { }
    
    /* اولویت بیشتر */
    div > p { }
    
    /* اولویت بالا */
    .container > div p.highlight { }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط