combinator رابطه میان سلکتور ها را شرح می دهد. سلکتور های CSS می توانند بیش از یک سلکتور ساده داشته باشند. بین سلکتور های ساده می توانیم یک combinator اضافه کنیم.
در CSS3 چهار نوع  combinator وجود دارد :


descendant (space)
child (>)
adjacent sibling (+)
general sibling (~)

 

سلکتور descendant

سلکتور descendant ( نسل ) تمام عناصری را که از نسل عنصر مشخص شده هستند ، به هم مرتبط می کند. در مثال زیر تمام عناصر <p> داخل عناصر <div> انتخاب می شوند :

مثال :

div p {
    background-color: yellow;
}

سلکتور Child

سلکتور child ( کودک ) عناصری را که نسل اول عنصر مشخص شده هستند ، انتخاب می کند. در مثال زیر عناصر <p> که مستقیما داخل عنصر <div> هستند و ما بین آنها عنصر دیگری وجود ندارد ، به عنوان نسل اول شناخته شده و انتخاب شده اند.

مثال :

div > p {
    background-color: yellow;
}

سلکتور adjacent sibling

سلکتور adjacent sibling (هم نژاد مجاور)  عناصری را که با عنصر مشخص شده هم نژاد باشند ، انتخاب می کند. عناصر هم نژاد باید دقیقا همان عنصر والد را که عنصر مشخص شده دارد ، داشته باشند و adjacent یعنی بالافاصله بعد از عنصر مشخص شده.

در مثال زیر عنصر <p> که بالافاصله بعد از عنصر <div> قرار دارد ، انتخاب می شود.

مثال :

div + p {
    background-color: yellow;
}

سلکتور general sibling

سلکتور general sibling (معمولی) تمام عناصری را که هم نژاد عنصر مشخص شده باشند ، انتخاب می کند. در مثال زیر تمام عناصر <p> که هم نژاد عنصر <div> هستند ، انتخاب شده اند.

مثال :

div ~ p {
    background-color: yellow;
}