سلکتور های css بخش سوم x y selector و x+y selector

بخش سوم سلکتور های css را برای استفاده شما کاربران گرامی سایت آموزی تهیه کردم.

سلکتور های css بخش سوم

شناخت کامل سلکتورهای css و استفاده کاربردی از آنها برای هر وبمستری مهم است.

سلکتور های css بخش سوم x y selector و x+y selector - سایت آموزی

انتخابگر یا سلکتور ابزاری است که توسط آنها می توانیم تغییراتی روی استایل المان های HTML انجام دهیم.

انتخابگرها زمانی کاربرد دارند که شما بخواهید استایل ها درون تگ استایل درون تگ head و یا در سند خارجی CSS بنویسید.

در حالت استایل دهی inline یا درون تگی استایل ها تنها برای همان تگ تغییر می کنند.

شناخت خوب سلکتورها شما را در گزینش بخش های مختلف سند HTML و تعریف آنها برای دستورات جاوااسکریپت و جی کوئری برای شما بسیار مهم است.

در این بخش در مورد دو سلکتور مهم دیگر css توضیح می دهم.

سلکتور ( X  Y Selector )

فرق سلکتور X Y و سلکتور X > Y که در جلسه قبلی توضیح دادم را خدمتتون عرض میکنم.

در حقیقت در سلکتور  X > Y  تنها فرزندان مستقیم انتخاب می شوند.

این در حالی بود که در سلکتور X Y که جلسه قبل خدمتتون توضیح دادم همه فرزندان درونی که داخل تگ پدر هستند رو شامل میشود.

یعنی اولین تگ فرزند که درون تگ پدر قرار میگیرد و کوچکتر از تگ پدر می باشد به خوبی انتخاب می شود.

از سلکتور X > Y با توجه به اختصاصی تر عمل کردنش می توانید در اسناد جاوااسکریپت هم استفاده کنید.

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

سلکتور های css بخش سوم x y selector و x+y selector - سایت آموزی

انتخابگر ( X + Y Selector )

این سلکتور برای انتخاب اولین تگ ( Y ) که پس از تگ ( X ) آمده انتخاب می شود.

با این روش به راحتی می توانید المنت ها یا تگ های پشت سر هم را انتخاب کنید.

همانطور که در شکل پایین ملاحظه می کنید ، اولین تگ P ( پاراگراف ) که بعد از تگ article آمده است به خوبی سلکت شده است و بک گراند ( پس زمینه ) آن به رنگ زرد تغییر کرده است.

نکته مهم

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

و سایر تگ های قبلی و بعدی p شامل تغییرات این سلکتور نمی شوند.

سلکتور های css بخش سوم x y selector و x+y selector - سایت آموزی

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

سلکتور های css بخش سوم | سلکتور x y selector | سلکتور x+y selector – اختصاصی سایت آموزی