|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

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

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

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

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد