021-20483015

combinator در CSS

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


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

 

سلکتور descendant

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

مثال :

سلکتور Descendant
div p {
    background-color: yellow;
}
مشاهده مثال

 

 

سلکتور Child

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

مثال :

سلکتور child
div > p {
    background-color: yellow;
}
مشاهده مثال

 

 

 

 

سلکتور adjacent sibling

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

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

مثال :

سلکتور Adjacent Sibling
div + p {
    background-color: yellow;
}
مشاهده مثال

 

 

 

 

سلکتور general sibling

 

 

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

مثال :

سلکتور General Sibling
div ~ p {
    background-color: yellow;
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

رضا اسدیان عالی بود واقعا خوب توضیح دادید مممنووووووووووووووووووووووووووووووووووووووووووووووووووووووووون

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط