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

سلکتور های css بخش ششم کلاس کاذب before:: و after::

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

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

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

انتخابگر ( X[href^=”http”] Selector ) :

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

علامت هش (^) به شروع شدن اشاره می کنه.

سلکتور مورد نظر آن دسته از تگ های a که تنها مسیر اونها با http شروع میشه رو انتخاب میکنه.

به عنوان مثال اگر سندمون دارای تگ a با پروتکل های متفاوت  http و https باشه فقط اونایی که اولشون با https شروع میشه انتخاب میشن و تغییرات مورد نظر روی اونها انجام میشه.

در بخش های قبلی یکسری از کلاس های کاذب ( Pseudo-class ) ها رو براتون تدریس کردم.

در این بخش دو تا از المنت های کاذب به نام های after و before رو براتون توضیح میدم.

( انتخابگر یا سلکتور after:: ) یا ( المنت کاذب after:: )

این سلکتور در حقیقت به ما این امکان رو می ده که از طریق کد css به سند html خودمون محتوا اضافه کنیم.

البته این محتوا در زمان استفاده از المنت کاذب after:: بعد از تگ مورد نظر قرار میگیره به مثال زیر توجه کنید:

img::after { content: “من محتوایی هستم که بعد از تگ img می آیم.”; }

( انتخابگر یا سلکتور before:: ) یا ( المنت کاذب before::)

این سلکتور هم ما این امکان رو می ده که از طریق کد css به سند html خودمون محتوا اضافه کنیم.

البته این محتوا در زمان استفاده از المنت کاذب before:: قبل از تگ مورد نظر قرار میگیره به مثال زیر توجه کنید:

img::before { content: “من محتوایی هستم که قبل از تگ img می آیم.”; }

تفاوت مهم المنت های کاذب after:: و before::

المنت کاذب after:: محتوا را به بعد از تگ مورد نظر اضافه می کند.

المنت کاذب before:: محتوا را به قبل از تگ مورد نظر اضافه می کند.

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

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

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

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

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

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

تگ های HTML در W3school

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

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

سلکتور های css بخش ششم کلاس کاذب before:: و after:: – اختصاصی سایت آموزی