آموزش شبه کلاس Target در CSS

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

آموزش شبه کلاس Target در CSS

Free-Learn

شبه کلاس Target در CSS

با استفاده از شبه کلاس ( یا هم انتخابگر ) target در CSS میتوان نام لنگر ( یا به انگلیسی Anchor Name ) عناصر موجود در صفحه را انتخاب و براشون استایل دلخواه تعریف کرد.

خب بطور کلی همونطورم که میدونید ما میتونیم در یک صفحه لینک داخلی ( یا لینک درون صفحه ای ) ایجاد نماییم، یعنی با استفاده از صفت ID به راحتی میتوانیم یک لنگر در صفحه ایجاد نماییم.

مثلا ما چندین لینک داریم که میخوایم وقتی روشون کلیک شد، کاربر در همون صفحه به قسمت های مختلفی از همان صفحه منتقل بشه ( یعنی تو همون صفحه باشه نه اینکه از صفحه بره بیرون )، حال به این حالت میگیم لنگر درست کردن در صفحه.

در نتیجه شبه کلاس Target دقیقا داره با همون قسمت لنگر کار میکنه، البته با لنگر فعال ( یعنی دقیقا لنگری که کاربر توش فرود اومده ) رو انتخاب میکنه و ما میتونیم به راحتی بهش استایل بدیم. ( مثال شماره ۱ )

نسخه CSS3

Free-Learn

مثال از شبه کلاس Target در CSS

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

مثال شماره ۱ : در مثال زیر چندین لینک وجود داره که وقتی روشون کلیک کنید به بخش های مختلف صفحه منتقل می شوید.

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

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

نام انتخابگر Chrome Firefox Opera Safari IE
target: ۴٫۰ ۳٫۵ ۹٫۶ ۳٫۲ ۹

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.

Free-Learn

نکات و توضیحات

با استفاده از ویژگی scroll-behavior میتونیم کاری کنیم که وقتی بروی لینک های درون صفحه کلیک میشود، اسکرول صفحه بصورت نرم / آروم انجام شود.

Free-Learn

دریافت PDF یا پرینت این مطلب