نوشته های امیرسینا شادکامی

تفاوت ۲ پیش پردازشگر سی اس اس (PostCSS , SASS)

امیرسینا شادکامی — Wed, 10 Mar 2021 14:41:11 +0330

Kapwing ساخته شده توسط وب اپ قطعا این مقاله برای کسانی هست که به چیستی و چرایی استفاده پیش پردازشگر ها در CSS اشراف دارند اما در انتخاب بین دو تکنولوژی ذکر شده دچار ابهام و شک هستند و یا قصد مطلع شدن از آخرین جایگاه این دو تکنولوژی در وب و یا بین توسعه دهندگان را دارند اما به هر حال برای برطرف شدن نیاز به اجرای آداب کلیشه ای و بی بهره نگذاشتن آن دسته از خوانندگانی که شاید اطلاعات کمتری داشته باشند در ادامه توضیح پیش پردازشگرها یک بار به مستقیم از MDN Web Docs موزیلا آورده شده و یک بار هم من فارسی توضیح میدم : MDN Web Docs's version : A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.Amirsina's version :درواقع پیش پردازشگر های سی اس اس برنامه هایی هستند با سینتکس هایی مختص و منحصر به فرد به خود که به بر روی ماشین شما نصب شده و بسته به نوع شان یا دارای کامپایلر هایی هستند که سی اس اس تولید میکنند یا با کمک تکنولوژی هایی در زبان هایی مانند جاوا اسکریپت ترنسپایل میشوند به سی اس اس .اما چرا پیش پردازشگر ها اصلا استفاده میشوند ؟ در پیش پردازشگر های سی اس اس قابلیت هایی به ما داده میشود که در سی اس اس ساده نیست مانند تعریف کردن تابع ، داشتن حلقه ، مپ کردن روی متغیر ها ، تابع های از پیش آماده کمکی ، تعریف متغیر ، تعریف قالب گونه هایی مانند پوسته برای تزریق استایل های دیفالت مانند مکان موقت نگه داری انیمیشن بدون داشتن نتیجه مستقل در خروجی و تنها صدا شدن در محل ایمپورت شده (mixin,placeholder) .البته لازم به ذکر است که به مرور زمان در سی اس اس خام دارای تغییراتی رخ داده است و در حال پیشرفت نیز میباشد که ویژگی هایی مانند تعریف متغیر و چند چیز دیگر به سی اس اس اضافه شده است اما با این حال استفاده از پیش پردازشگرها سبب افزایش راندمان سرعت ، رعایت DRY و بسیاری از مزایای دیگر مانند تو در تویی در نوشتن استایل میشود.ابتدا می توان مقایسه های کلی ای در مقیاس های متفاوت ببین Sass و PostCSS و حتی بعضی مواقع در باقی پیش پردازشگر های معمول مانند LESS , Stylus انجام داد سپس به بررسی ریز تر Sass و PostCSS پرداخت.بررسی از لحاظ نحوه و مقیاس ارائه ابزار و ویژگی ها : یکی از علت های محبوب شدن PostCSS نسبت به Sass این میباشد که در پست سی اس اس شما ابتدا پکیج اصلی رو از npm دریافت می کنید و سپس با توجه به نیاز استفاده از ویژگی خاصی می توانید آن را به صورت پلاگین ایمپورت کنید ( در واقع دوباره فیچر مورد نظر رو به صورت پکیج با npm ) . پکیج پایه به صورت خام پایه ترین امکانات رو پشتیبانی میکنه .از‌ این آدرس میتوانید لیست پلاگین های PostCSS رو مشاهده کنیداما در Sass شما تمامی فانکشنالیتی هارو چه نیاز به استفاده آن داشته باشید چه نه به صورت کامل دارید و این تفکیک پذیری و امکان جدا سازی وجود ندارد . بررسی از لحاظ سهولت استفاده و پیکربندی و راحتی یادگیری برای شروع : یکی از برتری های Sass در اینجا سریع تر و متعدد بودن روش های پیکربندی و استفاده وجود دارد اما روند تنظیم کردن PostCSS در اسکیل کلی یک پروژه ممکن است یک مقداری گیج کننده باشد همچنین از لحاظ سینتکس Sass دارای ۲ سینتکس میباشد و در ورژن SCSS سینتکس کاملا مشابه سی اس اس میباشد با این تفاوت که قابلیت تو در تویی نیز وجود دارد اما در پست سی اس اس سیننتکس کمی متفاوت تر است. این سهولت استفاده و پیکربندی sass در مقابل ناقص تر بودن از لحاظ دامنه فیچر ها نسبت به PostCss نیست بلکه تنها نقطه قوتی در sass هست و به این دلایل و دلایل دیگری مانند community های موجود در بحث پشتیبانی و دلایل دیگری که در انتهای پست در قسمت بررسی ریزتر ذکر شده Sass در محیط و زیرساخت های enterprise نسبت به باقی پیش پردازشگرها نیز بیشتر استفاده میشود .بررسی از لحاظ محبوبیت و سرعت رشد :npmtrends تهیه شده توسط وب اپ npmtrends تهیه شده توسط وب اپ همانطور که توی دو عکس بالا می ببینید PostCSS از ابتدای عرضه به مرور زمان دارای رشد با سرعت بالایی بوده به صورتی که تا ۲۸ ام February سال ۲۰۲۱ تقریبا ۴۲ میلیون دانلود و ۲۴ هزار ستاره ریپوزیتوری گیتهاب و wrapper های libsass , dartsass مجموعا ۵ میلیون و نیم دانلود و ۹ هزار ستاره ریپوزیتوری گیتهاب در npm داشته البته شایان ذکر است که sass طرق مختلف دیگری برای کامپایل شدن مانند استفاده از ابزار هایی مانند compass , koala و ... نیز دارد و تنها راه استفاده از آن استفاده از Wrapper های دارت و نود آن نیست اما این مقایسه صرفا جهت به نمایش کشیدن سرعت رشد استفاده و محبوبیت PostCSS انجام شده و دلیلی بر عملکرد ضعیف sass یا کمتر استفاده شدن نیست .وبسایت State of css هرسال گزارشی برای تمامی مباحث،تکنولوژی،فریمورک و راهکارهای مربوط به css منتشر میکند که در ادامه قسمت مربوط به پیش پردازشگر هارو در دسته های مختلف بررسی میکنیم بررسی از لحاظ آگاهی توسعه دهندگان :State Of Cssهمانطور که مشخص هست از لحاظ آگاهی تکنولوژی و مطلع بودن از آن هنوز Sass بعد از مدت ها بیشترین درصد را داردبررسی از لحاظ درصد استفاده توسعه دهندگان :State Of Css از لحاظ وسعت استفاده sass همانطور که مشخص است نیز بیشترین درصد را در ۲ سال اخیر داشتهبررسی از لحاظ رضایت توسعه دهندگان :State Of Css websiteرضایت استفاده توسعه دهندگان در ۲ سال اخیر در PostCSS نسبت به باقی پیش پردازشگر ها پیشرفت داشتهبررسی از لحاظ تجربه توسعه دهندگان :منبع : گزارش مربوط به پیش پردازشگر های سی اس اس در سایت State Of Css منبع : گزارش مربوط به پیش پردازشگر های سی اس اس در سایت State Of Css اما حالا بهتره PostCss رو یک بار تعریف کنیم : PostCSS ابزاری برای تبدیل CSS با پلاگین های JS است. این پلاگین ها می توانند از موارد زیادی پشتیبانی کنند.همینطور Sass رو تعریف میکنیم : Sass اکستنشنی برای CSS است که قوانین تو در تویی، متغیرها ، mixins ، وراثت انتخابگر و موارد دیگر را به آن اضافه می کند.همانطور که واضحه تعریف رسمی هر دو مشابه هم میباشد اما تفاوت اصلی که قبل تر ذکر نشد سرعت میباشد که به جز سرعت سریعتر پیکربندی Sass سرعت ترنسپایل و تبدیل در PostCss بیشتر هست .بررسی دقیق تر PostCSS و SASS : همانطور که قبل تر گفته شد در Sass اگر از سینتکس SCSS استفاده بکنید تماما شبیه به سی اس اس می باشد و در صورتی که کسی ایده ای از پیش پردازشگر ها نیز نداشته باشد تنها با باز کردن فایل ها قابل فهم تر هست در پست سی اس اس نیز این امکان وجود دارد اما به دلیل استفاده زیاد و متداول در نتیجه برخورد بیشتر با مثلا :@layer components , base {} , @applyشاید بتوان گفت SASS در عین قوی بودن کاملا Beginner friendly نیز می باشد .از لحاظ فیچر نیز می توان گفت تمامی ویژگی های مورد نیاز در یک پیش پردازشگر را هر دو دارا میباشند اما در حیطه های ریزتری مانند پریفیکس اضافه کردن برای خصیصه های CSS3 که برای پشتیبانی نیاز به پریفیکس دارند از آنجایی که PostCSS توسط تکنولوژی های جاوا اسکریپتی ای مثلا Babel ترنسپایل میشود در این پروسه autoprefix میتواند به عنوان پیکیجی وارد صحنه بشه و نیاز به نوشتن دستی پریفیکس نباشد اما از آنجایی که در اکثر ادیتور/IDE های مدرن اکستنشن هایی برای پریفیکس هست باز هم نیاز به دستی نوشتن آن نمیشود اما نکته مهم از این سناریو هندل کردن پریفیکس نیست بلکه پترنی هست که اینجا وجود داره اگه دقت کنید Sass تمامی ویژگی های مورد نیاز رو کامل درون کامپلایر خودش داره اما فقط همون ها هست و فیچر های دیگه باید در آپدیت های رسمی اضافه شود البته منظور این نیست که نشود ماژولی اضافه کرد به امکانات Sass امکانش وجود دارد اما از لحاظ پیچیدگی زمان برتر است نسبت به PostCSS چون PostCSS ما مایندستی طراحی شده که به صورت راحت در صورت نیاز پکیج های مورد نیاز رو میتوانید اضافه کنید حالا در مثال بالا آتوپریفیکسر بود اما میتواند هرچیزی باشد .نکته حائز اهمیت دیگر این است که Sass توسط خیلی از پروژه های front-end مستقیما استفاده شده مانند bootstrap و یا حتما در فریمورک خود از Sass پشتیبانی میکنند این ویژگی برای PostCSS هم صدق میکند اما در مقیاس کوچکتر .از آنجایی که تمرکز این مقاله بر رو توضیح و شکاف عمیق این ۲ پیش پردازشگر نیست در صورت علاقه برای مطالعه بیشتر میتوانید به مستندات مربوط در لینک های زیر مراجعه کنید :مستندات Sassمستندات PostCSSنتیجه گیری نهایی ؟نمیدونم منظور از نتیجه گیری نهایی چه چیز هایی می تواند باشد چون همیشه این دیدگاه در استفاده از تکنولوژی ها وجود دارد که بهتری یا برتری ، مقایسه در فاکتور و مقیاس های غیر قابل ارزش و غیر ضروری انجام میشود بنظر من درست تر این هست که ویژگی و توانایی های یک تکنولوژی رو بدانیم و بسته به نیاز ها و اسکیل مشکل از جعبه ابزار تکنولوژی موردنیاز رو انتخاب کنیم پس یعنی اگر به جفت این تکنولوژی ها مسلط باشیم انتخاب درست تری هست و به این مقایسه بیشتر به دید سنجش وضعیت کلی در وب و بررسی ویژگی های منحصر به فرد آنها نگاه کرد .در نهایت با داشتن اطلاعات مقایسه شده بالا در ذهن میتوان برای سناریو های مختلف تصمیم گیری بهتری کرد و پاسخ بهتری به پرسش هایی مانند پرسش زیر داد : پروژه های با اسکیل اینترپرایز تر بهتره از کدام پیش پردازشگر استفاده کنند ؟ منابع : https://sass-lang.com/ https://postcss.org/ https://developer.mozilla.org/en-US/ https://www.npmtrends.com/ اگر مطلبی گنگ بود و نحوه بهتری برای بیان کردن دارد ، اشتباه تایپی و یا پیشنهادی برای اضافه شدن مطلبی دارید در کامنت نظرتون رو بنویسید ممنون .

انتخابگرها (Selectors) در CSS یک بار برای همیشه !!

امیرسینا شادکامی — Sat, 18 Jan 2020 18:30:36 +0330

یک سوال/مشکلی که شاید برای خیلی ها در هنگام "یادگیری/انجام کار" پیش اومده باشه این است که در انتخاب Selector دچار شک/اشتباه میشوند و درون یک لوپ اذیت کننده گیر می‌کنند به دلیل ندانستن سلکتور مناسب پس بعد از مدت زمانی درگیری، تسلیم شده و بجای استفاده از سلکتور مناسب روی می‌آورند به DOM Manipulation با استفاده از جاوا اسکریپت یا از اون بدتر تغییر دادن DOM Structure !!‌ .سی اس اس سلکتورهای نسبتاً زیادی دارد اما واقعاً همه آن‌ها مکرر استفاده نمی‌شوند و تعدادی مورد استفاده‌های خاص دارند از این تعداد بعضی‌ها از روی اسم مشخص می‌شود که چه کاری انجام می‌دهند و تعدادی هم علامت سوال باقی می‌مانند لازم نیست به همه سلکتور ها مسلط باشید هدف این پست توضیح و تشریح کاربردی‌ترین و پراستفاده‌ترین سلکتورها به طور کامل و یک بار برای همیشه است .در پایین یک شِما کلی از سلکتورهای پرکاربرد و مهم آورده‌ام اما قبل از اینکه به سراغشون بریم لازم دونستم بگم اشاره‌ای به سلکتور کلاس و آیدی ( ' . ' , ' # ' ) نکردم چون فرض بر این است که اگر کسی از این دو مطلع نباشه بهتره بجای ادامه این مطلب، آموزش ابتدایی css رو شروع کنه.draw.io ساخته شده با ۱ . سلکتور فرزندان: برای استفاده از این سلکتور نیازی به استفاده از کاراکتر خاصی نیست در واقع همان فاصله (space) بین المنت‌ها است و تمامی فرزندان المنت موردنظر رو انتخاب می‌کند .مثلا فرض کنید داریم : ساختار HTML مثال ساختار CSS مثالسوال: استایل بر روی کدام پاراگراف ها اعمال میشود؟‌جواب: همهوقتی از سلکتور فرزندان استفاده می‌کنید تو در تویی المنت ها اهمیتی ندارد فقط کافیه فرزند Wrapper اصلی باشند.یعنی حتی در حالت زیر هم استایل‌ها بر روی پاراگراف اعمال خواهد شد تا زمانی که پاراگراف ها فرزند Post هستند.ساختار HTML با تو در تویی عمیق المنت ها۲. سلکتور فرزند مستقیم (<)‌: فرزند مستقیم المنت مورد نظر رو انتخاب می‌کند.یعنی در واقع المنت‌هایی که مستقیما فرزند المنت پدر ذکر شده هستند انتخاب می‌شوند نه المنت‌هایی که درون المنت دوم یا سومی قرار گرفته است .مثال قبل رو با سلکتور فرزند مستقیم بازنویسی می‌کنیم‌: ساختار HTML با تو در تویی فرزندانساختار CSS مثالسوال: استایل بر روی کدام پاراگراف‌ها اعمال می‌شود؟‌جواب: پاراگراف‌های خط ۲ و ۲۲ ( اولین پاراگراف بعد از تگ section و آخرین پاراگراف قبل از بسته شدن تگ section )۳. سلکتورهای ( خویشاوند ) :‌ ۳ ـ ۱ :‌ General Sibling Selector : (‌ ~ ) : با استفاده از این سلکتور تمامی المنت‌هایی که از جنس سمت راست "~" هستند و بعد از المنت از جنس سمت چپ "~" اومدن و به شرطی که پدر هردو المنت‌ها یکی باشد انتخاب می‌شوند. برای درک بهتر مثال زیر رو ببینید: ساختار HTML مثال ~ساختار CSS مثال ~سوال: استایل بر روی کدام پاراگراف‌ها اعمال می‌شود؟‌جواب: پاراگراف‌های ۲۲ و ۲۳شروطی که پاراگراف‌هایی که انتخاب می‌شوند باید داشته باشند: بعد از المنت H1 آمده باشندالمنت پدر اونها با H1 یکی باشهبه دلیل نقض موارد بالا استایل بر روی پاراگراف های خط ۱۲ , ۱۴ ,۱۶ , ۲۰ و ۲۵ با استفاده از این سلکتور تمامی المنت‌های که از جنس سمت راست "~" هستند و بعد از المنت از جنس سمت چپ "~" اومدن و به شرطی که پدر هردو المنت‌ها یکی باشد انتخاب می‌شوند. برای درک بهتر مثال زیر رو ببینید: اجرا نمی‌شود.برسی جداگانه موارد نقض:خط های ۱۲-۱۴-۱۶ : قبل از H1 اومدن خط ۲۰-۲۵ : پاراگراف‌ها بعد از H1 اومدن اما پدر پاراگراف‌ها با H1 یکی نیست در خط ۲۰ پدر پاراگراف یک div است و خط ۲۵ پاراگراف بیرون از section که پدر H1 هست قرار دارد.۳ ـ ۲ : Adjacent Sibling Selector (+): با استفاده از این سلکتور تنها اولین المنت از جنس سمت راست "+" که مستقیما بعد از المنت از جنس سمت چپ "+" اومده باشه انتخاب میشه با این تفاسیر اگه مثال قبل رو در نظر بگیریم هیچ پاراگرافی انتخاب نمی‌شود اما اگه بعد از H1 مستقیما پاراگراف هایی داشته باشیم هر تعدادی هم که باشند مهم نیست تنها اولین پاراگراف انتخاب می‌شود: Adjacent Sibling SelectorAdjacent Sibling Selectorسوال: استایل بر روی کدام پاراگراف(ها) اعمال می‌شود؟‌جواب: تنها پاراگراف بعد از H1 ۴. سلکتور های خصیصه (Attribute Present Selector):تگ های HTML دارای attribute های مختلف و زیادی هستند می‌توان در css از این attr ها استفاده کرد. مثلا:ساختار HTML مثال attribute selectorsساختار CSS مثال attribute selectorsدر مثال بالا از attr های href,type,id استفاده شده اما اکثر attr ها قابل استفاده است مانند attr های form,input , .... در مثال بالا شاید کاراکترهای $,^,* کمی گیج کننده باشد اما فقط تا چند ثانیه دیگه d:' '=^ : به معنی این است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده شروع شود با محتوای درون ' '' '=* : به معنی این است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده شامل محتوای درون ' ' باشد' '=$ : به این معنی است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده به محتوای درون ' ' خاتمه یابدبرای درک بهتر دوباره به مثال رجوع می‌کنیم: در آیتم اول تنها مساوی استفاده شده با محتوای https://google.com این سلکتور تگ های a که دقیقا شامل href گوگل است انتخاب می‌کند.در آیتم دوم تگ های a که href شان با https://hub شروع میشود انتخاب می‌شوند.در آیتم سوم و چهارم تگ های a که href شان با io,org خاتمه میبابد انتخاب میشوند .در آیتم پنجم تگ های a که href شان شامل کلمه redux است انتخاب میشوند .در آیتم ششم لیست های ol که تایپشان yellow است انتخاب میشوند . در آیتم هفتم span درون div با آیدی unique_div انتخاب میشود .۵ : سلکتور های شبه کلاس ( Pseudo-classes ) : شبه کلاس ها زمانی استفاده میشوند که نیاز به دسترسی به یک المنت در موقعیت یا حالتی خاص از آن را داشته باشیم که ۸ مورد از متداول ترین آنها را در زیر توضیح دادم : ۵ ـ ۱ : سلکتور های شبه کلاس مربوط به لینک ها : ( Link Pseudo-classes ) :a:link {...} ~> لینک ها در حالت عادی و دیده نشده a:visited {...} ~> لینک ها در حالت دیده شده a:visited {...} ~> لینک ها در حالت دیده شده۵ ـ ۲ : سلکتور های شبه کلاس مربوط به رفتار کاربر : ( User Action Pseudo-classes ) :a:hover {...} ~> المنتی که در حال حاظر نشانگر بر رویش قرار داره a:active‌ {...} ~> لینک فعال در حال حاظر a:focus {...} ~> المنتی که تاچ شده۵ ـ ۳ : سلکتور های شبه کلاس مربوط به وضعیت رابط کاربری : ( User Interface State Pseudo-classes ) : input:enabled {...} ~> input های فعالinput:disabled {...} ~> input های غیرفعالinput:checked {...} ~> چک باکس های تیک خوردهinput:indeterminate {...} ~> وقتی که بر روی سلکت باکس یا رادیو باکسی هنوز تغییری اعمال نشده۵ ـ ۴ : سلکتور های شبه کلاس مربوط به ساختار و مکان : ( Structural & Position Pseudo-classes ) : div:first-child {...} ~> اولین فرزند رو انتخاب میکند div:last-child {...} ~> آخرین فرزند رو انتخاب میکند div:first-of-type {...} ~> اولین فرزند یک پدر از جنس المنت مورد نظر div:last-of-type {...} ~> آخرین فرزند یک پدر از جنس المنت مورد نظر div div:only-child {...} ~> درصورتی فرزند انتخاب میشود که تک فرزند المنت پدر باشدشاید درک مورد only-child کم سخت باشه برای همین به مثال زیر دقت کنید :ساختار HTML مثال only-childساختار CSS مثال only-childتنها اسپنی انتخاب میشود که به تنهایی فرزند تگ div است۵ ـ ۵ : سلکتور های شبه کلاس مربوط به اعداد و عبارات : ( Numbers & Expressions Pseudo-classes ) :۱ . elm:nth-child(n) HTML ۲ . elm:nth-child(an) ۳ . elm:nth-child(n+b) ۴ . elm:nth-child(an+b) ۵ . elm:nth-child(an-b)۵ ـ ۵ ـ ۱ : مستقیما فرزند n ام انتخاب میشود۵ ـ ۵ ـ ۲ : فرزند های مضرب an انتخاب میشوند۵ ـ ۵ ـ ۳ : در اینجا یکم داستان فرق میکنه در اینجا با توجه به مقدار b از خود b به بعد فرزندان انتخاب میشوند به عنوان مثال :li:nth-child(n + 4) ~> لیست آیتم های ۴ به بعد انتخاب میشوند۵ ـ ۵ ـ ۴ : در اینجا N از صفر شروع شده و بعد از ضرب در a با مقدار b جمع شده و فرزندان منتخب محاسبه میشوند به عنوان مثال :li:nth-child(4n+7) : (4×0)+7, (4×1)+7, (4×2)+7 = فرزندان ۷ و ۱۱ و ۱۵ انتخاب میشوند ۵ ـ ۵ ـ ۵: در اینجا نیز N از صفر شروع شده و بعد از ضرب در a مقدار b از آن کم شده و فرزندان منتخب محسابه میشوند به عنوان مثال :li:nth-child(6n-4) : (6×0)-4, (6×1)-4, (6×2)-4 = فرزندان ۲ و ۸ و ۱۴ انتخاب میشوند۵ ـ ۶ : سلکتور شبه کلاس تهی : ( Empty Pseudo-class ) :المنت هایی انتخاب میشوند که درون آنها یا خالی باشه یا فقط کامنت درونشون باشه فقط نکته قابل توجه این است که space یا tab تهی محسوب نمیشونهد از آن جایی که از جنس استرینگ هستند به عنوان مثال : #post span:empty {...}

~> این انتخاب میشه ~> این انتخاب نمیشه فاصله ~> این انتخاب میشه

۵ ـ ۷ : سلکتور شبه کلاس نفی‌ : ( Negation Pseudo-class ) :این سلکتور فیلتر نفی میکنه و المنت هایی که درون ( ()not: ) ذکر شدن رو انتخاب نمیکنهنکته جالب درباره این سلکتور این است که قابل ترکیب با سلکتور های قبلی نیز است به مثال های زیر توجه کنید :li:not(.li-elements) {...} ~> لیست آیتم هایی که فاقد کلاس ذکر شده اند ul li:not(:nth-child(2n)) {...} ~> لیست آیتم هایی که مضرب ۲ نیستند انتخاب میشوندساختار HTML مثال ترکیبی not , nth-child ساختار CSS مثال ترکیبی not , nth-child ۵ ـ ۸ : سلکتور های شبه المنت مربوط به متن : ( Textual Pseudo-elements ) :element::after {...} ~> با استفاده از این سلکتور یک شبه المنت به آخر المنت سلکت شده اضافه میشود که میتواند استایل و محتوا بگیرد معمولا برای اضافه کردن انیمیشن و آیکون و در حال تزیینات استفاده میشود element::before {...} ~> مانند افتر است با این تفاوت که شبیه المنت را به اول المنت انتخاب شده اضافه میکند element::first-letter {...} ~> اولین کاراکتر متن محور درون المنت مورد نظر انتخاب میشود استفاده از این مورد رو باید اکثرا در سایت های نشریات دیده باشید element::first-line {...} ~> اولین خط پاراگراف المنت مورد نظر رو انتخاب میکنه element::placeholder {...} ~> اگه المنت مورد نظر دارای پلیس هولدر باشه انتخاب شده و میتوان بهش استایل بدید element::selection {...} ~> وقتی تکستی رو توی یک وب پیج انتخاب میکنید قسمت انتخاب شده یک رنگ و یک پس زمینه دارد اگه دقت کرده باشید بسته به یوزر ایجنت سیستم عامل و رنگ اکسنت یک حالت دیفالت داره مثلا فکر کنم دیفالت ویندوز آبی سفید است اوبونتو نارنجی سفید و مک او اس سفید و رنگ اکسنت انتخاب شده در تنظیمات است اما بعضی وبسایت ها فرق میکنه از موضوع اصلی دور نشیم نهایت قضیه این هست که این رنگ قابل تعویضه و این کار با استفاده از این سلکتور انجام پذیره به عنوان مثال اگه به خود ویرگول نگاه کنید :selection{ background:#0f94e9; color:#fff } استفاده کرده