آشنایی با سلکتورها در CSS - بخش دوم

1 هفته پیش
توسط محسن آستانه آپدیت شد
محسن آستانه ( 12590 تجربه )
1 هفته پیش
تخصص : عاشق طراحی وب و برنامه نویسی

2- سلکتورهای ترکیبی

این سلکتورها شامل چهار دسته زیر می شوند:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

Descendant Selector

این سلکتور تمامی عناصر فرزند داخل خود را چه در سطح یک چه در سطح دو و … را انتخاب می کند. هم فرزندان هم نوه ها نبیره ها و … را انتخاب می کند.
در مثال زیر تمامی عناصر p که در داخل تگ div والد خود هستند چه فرزندان و چه نوه ها انتخاب می شوند:

Descendant Selector

Child Selector

این سلکتور تمامی عناصری که فرزند مستقیم تگ والد خود هستند را انتخاب می کند.
در این مثال تمام تگ های p که فرزند مستقیم و فرزند سطح اول تگ div هستند انتخاب می شوند:

Child Selector

Adjacent Sibling Selector

این سلکتور تمامی تگ هایی که بلافاصله بعد از تگ هم سطح و به اصطلاح sibling خود می آیند را انتخاب می کند. اصطلاح سیبلینگ به معنی هم سطح و همچنین خواهر برادری نیز گفته می شود چون هر دو در یک سطح هستند و هر دو فرزندان مستقیم یک والد می باشند.
در این مثال تگ پی ای که بلافاصله بعد از تگ دیو آمده است انتخاب می شود. همان طور که توجه می کنید دو تگ پی آخر هم سطح و سیبلینگ تگ دیو هستند و از بین این دو تگ پی فقط تگ پی اول که بلافاصله بعد از تگ دیو آمده است انتخاب می شود:

Adjacent Sibling Selector

General Sibling Selector

این سلکتور تمامی عناصری را که بعد از عنصر هم سطح خود می آیند را انتخاب می کند.
در این مثال دو تگ پی که بعد از تگ دیو هم سطح خود آمده اند انتخاب شده اند. توجه داشته باشید که مهم نیست این تگ ها چگونه بعد از تگ دیو آمده اند. همان طور که می بینید یک تگ code بین دو تگ پی آمده است ولی با این وجود مانع انتخاب تگ پی دوم نشده است:

General Sibling Selector

فرهاد ( 22270 تجربه )
1 هفته پیش
تخصص : برنامه نویس

@Astaneh خیلی عالی و خوب ولی فک کنم اگه مطلبی چیزی دارید ادمین راکت شید @hesammousavi

محسن آستانه ( 12590 تجربه )
1 هفته پیش
تخصص : عاشق طراحی وب و برنامه نویسی

نه واللا من صرفا از روی اشتیاق و همچنین بخاطر به اشتراک گذاشتن چیزهایی که بلد هستیم این مطالب رو درج میکنم و بیشتر از اونی که بخوام یاد بدم خودم باید از دوستان یاد بگیرم! تنها هدفم همین هست. مطمینا اگه چیزهایی که بلد هستیم رو بهم یاد بدیم نه تنها این سایت و خودمون که مملکتمون پیشرفت می کنه. مشکل ما این هست که دوس نداریم مطالبی رو که یاد داریم با دیگران به اشتراک بزاریم. چکاریه؟! به دیگران یاد بدم که اونا ازم جلو بزنن؟!! این تفکر اکثر ما ایرانی هاست و علت عقب افتادگیمون هم همین هست.

حسام موسوی ( 310334 تجربه )
1 هفته پیش
تخصص : طراح و برنامه نویس

سپاس از اینکه این مطلب رو به اشتراک گذاشتید

محسن آستانه ( 12590 تجربه )
1 هفته پیش
تخصص : عاشق طراحی وب و برنامه نویسی

خواهش می کنم. تشکر از شما

برای ارسال پاسخ باید وارد سایت شوید