combinator در CSS
یادگیری CSScombinator رابطه میان سلکتور ها را شرح می دهد. سلکتور های 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;
}
مشاهده مثال
نظرات