شبه المنت ها و شبه کلاس ها در css

رفقا سلام

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

1 . شبه المنت یا نیم المنت (pseudo elements)

یه مفهومی توی css وجود داره به اسم شبه المنت یا نیم المنت به این صورت که یه سری المنت ها به صورت خارجی وجود ندارن ولی می شه بهشون با css استایل داد و یا اصلا به صورت المنت باهاشون رفتار کرد یا اصلا ایجادشون کرد مثلا :

نیم المنت after :

در واقع این بزرگوار میاد قبل از شروع المنت اصلی یه نیم المنت ایجاد می کنه می شه در حد تکست و فونت ایکون بهش محتوا داد و استایل های مختلف بهش داد

نیم المنت before :

این هم مثل after عمل می کنه با این تفاوت که بعد از المنت اصلی ایجاد می شه

نیم المنت first-letter :

همون طور که از اسمش پیداس میاد حرف اول المنت اصلی رو می گیره و شما می تونید مثل بقیه المنت ها بهش استایل بدید

نیم المنت first-line :

ایشون هم خط اول رو هدف قرار می ده و می تونید خط اول المنت اصلی رو هر استایلی که بخواید بدید

نیم المنت marker :

در تگ های ol و ul وقتی که لیست ایجاد می کنید در کنار لیست ایتم ها یک علامت به صورت عددی یا ایکونی وجود داره با استفاده از نیم المنت marker می تونید به اون بخش استایل بدید

نیم المنت selection :

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

2 . شبه کلاس یا نیم کلاس (pseudo classes)

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

به عنوان مثال وقتی که روی یک لینک کلیک کنید و نگهدارید (نیم کلاس active)

یا وقتی که کرسر موس رو داخل یک تکست باکس قرار بدید (نیم کلاس focus )

*** نکته : تعداد نیم کلاس ها خیلی زیاده من تو این مقاله چند تاییش رو اسم می برم و شما رو میسپارم به دست دوست خوبم w3schools ***

نیم کلاس first-child :

همون طور که از اسمش پیداست اولین فرزند المنت اصلی رو هدف قرار می ده

نیم کلاس hover :

این نیم کلاس حالتی رو هدف قرار می ده که نشانگر موس در لحظه روی المنت قرار گرفته باشه

نیم کلاس root :

مستقیما دایکیومنت اصلی رو هدف قرار می ده(اغلب متغیر های css هم توی همین تعریف می شه )

نیم کلاس disabled :

حالت غیر فعال المنت رو هدف قرار می ده (یعنی وقتی که اتربیوت disabled داخل المنت فعال باشه)

نیم کلاس last-child :

همون طور که از اسمش پیداست اخرین فرزند المنت اصلی رو هدف قرار می ده

خلاصه شناختن این نیم کلاس ها و نیم المنت های خیلی مهم هستن و شما با دذونستن اینها می تونید بخش خیلی زیادی کد هاتون رو بهینه کنید

لینک کامل نیم کلاس ها و نیم المنت ها اینجا هست می تونید خودتون بخونیدش : نیم المنت ها و نیم کلاس ها

امیدوارم مفید باشه :)