آشنایی با سلکتورها در CSS - بخش دوم
2- سلکتورهای ترکیبی
این سلکتورها شامل چهار دسته زیر می شوند:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Descendant Selector
این سلکتور تمامی عناصر فرزند داخل خود را چه در سطح یک چه در سطح دو و … را انتخاب می کند. هم فرزندان هم نوه ها نبیره ها و … را انتخاب می کند.
در مثال زیر تمامی عناصر p که در داخل تگ div والد خود هستند چه فرزندان و چه نوه ها انتخاب می شوند:
Child Selector
این سلکتور تمامی عناصری که فرزند مستقیم تگ والد خود هستند را انتخاب می کند.
در این مثال تمام تگ های p که فرزند مستقیم و فرزند سطح اول تگ div هستند انتخاب می شوند:
Adjacent Sibling Selector
این سلکتور تمامی تگ هایی که بلافاصله بعد از تگ هم سطح و به اصطلاح sibling خود می آیند را انتخاب می کند. اصطلاح سیبلینگ به معنی هم سطح و همچنین خواهر برادری نیز گفته می شود چون هر دو در یک سطح هستند و هر دو فرزندان مستقیم یک والد می باشند.
در این مثال تگ پی ای که بلافاصله بعد از تگ دیو آمده است انتخاب می شود. همان طور که توجه می کنید دو تگ پی آخر هم سطح و سیبلینگ تگ دیو هستند و از بین این دو تگ پی فقط تگ پی اول که بلافاصله بعد از تگ دیو آمده است انتخاب می شود:
General Sibling Selector
این سلکتور تمامی عناصری را که بعد از عنصر هم سطح خود می آیند را انتخاب می کند.
در این مثال دو تگ پی که بعد از تگ دیو هم سطح خود آمده اند انتخاب شده اند. توجه داشته باشید که مهم نیست این تگ ها چگونه بعد از تگ دیو آمده اند. همان طور که می بینید یک تگ code بین دو تگ پی آمده است ولی با این وجود مانع انتخاب تگ پی دوم نشده است:
پاسخها
4
@Astaneh خیلی عالی و خوب ولی فک کنم اگه مطلبی چیزی دارید ادمین راکت شید @hesammousavi
نه واللا من صرفا از روی اشتیاق و همچنین بخاطر به اشتراک گذاشتن چیزهایی که بلد هستیم این مطالب رو درج میکنم و بیشتر از اونی که بخوام یاد بدم خودم باید از دوستان یاد بگیرم! تنها هدفم همین هست. مطمینا اگه چیزهایی که بلد هستیم رو بهم یاد بدیم نه تنها این سایت و خودمون که مملکتمون پیشرفت می کنه. مشکل ما این هست که دوس نداریم مطالبی رو که یاد داریم با دیگران به اشتراک بزاریم. چکاریه؟! به دیگران یاد بدم که اونا ازم جلو بزنن؟!! این تفکر اکثر ما ایرانی هاست و علت عقب افتادگیمون هم همین هست.
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
سپاس از اینکه این مطلب رو به اشتراک گذاشتید
خواهش می کنم. تشکر از شما